html5绘制圆形钟表,Html5 Canvas开发之画圆（时钟，贝塞尔曲线）和旋转缩放

1.时钟

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

function toDraw(){

var x = 200;

var y = 200;

var r = 150;

oGC.clearRect(0,0,oC.width,oC.height);

var oDate = new Date();

var oHours = oDate.getHours();

var oMin = oDate.getMinutes();

var oSen = oDate.getSeconds();

var oHoursValue = (-90 + oHours*30 + oMin/2) * Math.PI/180;

var oMinValue = (-90 + oMin*6) * Math.PI/180;

var oSenValue = (-90 + oSen*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,false);*/

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();

oGC.fillStyle = 'white';

oGC.beginPath();

oGC.moveTo(x,y);

oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);

oGC.closePath();

oGC.fill();

oGC.lineWidth = 3;

oGC.beginPath();

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();

oGC.fillStyle = 'white';

oGC.beginPath();

oGC.moveTo(x,y);

oGC.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);

oGC.closePath();

oGC.fill();

oGC.lineWidth = 5;

oGC.beginPath();

oGC.moveTo(x,y);

oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);

oGC.closePath();

oGC.stroke();

oGC.lineWidth = 3;

oGC.beginPath();

oGC.moveTo(x,y);

oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);

oGC.closePath();

oGC.stroke();

oGC.lineWidth = 1;

oGC.beginPath();

oGC.moveTo(x,y);

oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);

oGC.closePath();

oGC.stroke();

}

setInterval(toDraw,1000);

toDraw();

};

2.贝塞尔曲线

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

/*oGC.moveTo(100,200);

oGC.quadraticCurveTo(100,100,200,100);

oGC.stroke();*/

oGC.moveTo(100,200);

oGC.bezierCurveTo(100,100,200,200,200,100);

oGC.stroke();

};

3.旋转缩放

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

var num = 0;

var num2 = 0;

var value = 1;

oGC.translate(200,200);

setInterval(function(){

num++;

oGC.save();

oGC.clearRect(0,0,oC.width,oC.height);

if(num2 == 50){

value = -1;

}

else if(num2 == 0){

value = 1;

}

num2 += value;

oGC.scale( num2*1/50,num2*1/50 );

oGC.rotate(num*Math.PI/180);

oGC.translate(-50,-50);

oGC.fillRect(0,0,100,100);

oGC.restore();

},30);

};