/** * 绘制圆 * arc(x,y,半径,起始弧度,结束弧度,旋转方向) * x,y起始位置 * 弧度与角度的关系 : 弧度 = 角度*Math.PI/180 * 旋转方向:顺时针(默认false)、逆时针(true) */ var oc = document.getElementById('canvas'); var ogc = oc.getContext('2d'); //实例1绘制扇形 ogc.moveTo(200,200); ogc.arc(200,200,150,0,90*Math.PI/180,false); ogc.arc(200,200,150,0,90*Math.PI/180,true); ogc.stroke(); //canvas表盘 function toDraw(){ var x = 200; var y = 200; var r = 150; //9每次执行时清空画布 ogc.clearRect(0,0,oc.width,oc.height); //8获取时间 var oDate = new Date(); var oHours = oDate.getHours(); var oMin = oDate.getMinutes(); var oSec = oDate.getSeconds(); var oHoursValue = (-90+oHours*30 + oMin/2)*Math.PI/180; var oMinvalue = (-90+oMin*6)*Math.PI/180; var oSecvalue = (-90+oSec*6)*Math.PI/180; /*ogc.moveTo(x,y); ogc.arc(x,y,r,0,6*Math.PI/180,false); ogc.moveTo(x,y); ogc.arc(x,y,r,6*Math.PI/180,12*Math.PI*180,true)*/ //1绘制表盘 ogc.beginPath(); for(var i=0;i<60;i++){ ogc.moveTo(x,y); ogc.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false); } ogc.closePath(); ogc.stroke(); //2去掉圆点到刻度的线条,画圆并填充颜色覆盖 ogc.fillStyle = 'white'; ogc.beginPath(); ogc.moveTo(x,y); ogc.arc(x,y,r*19/20,0,360*Math.PI/180,false); ogc.closePath(); ogc.fill(); //3绘制时针刻度 ogc.beginPath(); ogc.lineWidth=2; for(var i=0;i<12;i++){ ogc.moveTo(x,y); ogc.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false); } ogc.closePath(); ogc.stroke(); //4去掉时针刻度的线条,画圆并填充颜色覆盖 ogc.fillStyle = 'white'; ogc.beginPath(); ogc.moveTo(x,y); ogc.arc(x,y,r*18/20,0,360*Math.PI/180,false); ogc.closePath(); ogc.fill(); //5绘制时针 ogc.beginPath(); ogc.lineWidth = 5; ogc.moveTo(x,y); ogc.arc(x,y,r*8/20,oHoursValue,oHoursValue,false); ogc.closePath(); ogc.stroke(); // 6绘制分针 ogc.beginPath(); ogc.lineWidth = 3; ogc.moveTo(x,y); ogc.arc(x,y,r*12/20,oMinvalue,oMinvalue,false); ogc.closePath(); ogc.stroke(); // 7绘制秒针 ogc.beginPath(); ogc.lineWidth = 2; ogc.moveTo(x,y); ogc.arc(x,y,r*16/20,oSecvalue,oSecvalue,false); ogc.closePath(); ogc.stroke(); } toDraw(); setInterval(function(){ toDraw(); },1000); ///////////////////////////////////////// /** * 绘制曲线 * artTo(x1,y1,x2,y2,r); * x1,y1第一组坐标 * x2,y2第二组坐标 * r:半径 *贝塞尔曲线 * quadraticCurveTo(dx,dy,x1,y1) * 贝塞尔曲线:第一组控制点,第二组控制点 * bezierCurveTo() * 贝塞尔曲线:第一组控制点,第二组控制点,第三组结束点 * * canvas变换 * translate,rotate,scale */ ogc.moveTo(100,200); ogc.arcTo(100,100,200,100,50); ogc.stroke(); //quadraticCurveTo ogc.moveTo(100,200); ogc.quadrativCurveTo(100,200); ogc.stroke(); //bezierCurzeTo ogc.moveTo(100,200); ogc.bezierCurveTo(100,100,200,200,200,100); ogc.stroke(); //canvas变换 ogc.translate(100,100); ogc.rotate(45*Math.PI/180); ogc.scale(2,1); ogc.fillRect(0,0,100,100);
时间: 2024-10-18 19:19:31