canvas的绘制

矩形:

   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)




  

  


  

原文地址:https://www.cnblogs.com/li-123/p/7070041.html