矩形:
ctx.fillStyle = '#faa';
ctx.fillRect(300,100,200,50);
圆:
ctx.fillStyle = "#CE1ACE";
ctx.arc(200,100,50,0,2*Math.PI);
ctx.stroke();
ctx.fill();
可以调节弧度来改变圆的形状 0-360
线段:
ctx.beginPath();
ctx.strokeStyle = "#f40";
ctx.lineWidth = "30";
ctx.moveTo(0,0);
ctx.lineTo(200,200);
ctx.stroke();
可以通过终点来绘制各种图形
文本:
ctx.beginPath();
ctx.font= "italic bold 80px 微软雅黑";
ctx.strokeStyle="#020";
ctx.textAlign="center";
ctx.textBaseline="middle";
ctx.strokeText("你瞅啥,瞅你咋的!",400,200);
图像的放大缩小
ctx.scale(2,2);
ctx.strokeRect(10,10,50,100);
旋转
var num = 0 ,num2 = 1;
setInterval(function(){
ctx.rotate(num*Math.PI/180);
ctx.fillRect(num2,0,100,50);
num =5;
num2+=1;
},200)