canvas基本用法

切记：canvas是基于状态绘制的！！！

 

HTML

• <canvas id="canvas"></canvas>

Javascript

• var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  
  //下面使用context进行绘制

Context

• // 绘制直线
  context.moveTo(x,y);// 将笔尖挪到位置(x,y)
  context.lintTo(x,y);// 从上一个坐标点开始连接到当前坐标点
  // 绘制弧线
  context.arc(cx,cy,r,sAng,eAng,anticlock=false);
  
  // 重新开始一段路径和结束当前路径，不用成对出现
  context.beginPath();// 从现在开始我要进行一段全新的绘制
  context.closePath();// 绘制封闭的图形
  
  // 状态
  context.lineWidth
  context.strokeStyle
  context.fillStyle
  
  // 绘制，使用的时候如果要同时使用描边和填充，那么请先使用填充，再使用描边，不然描的边会变窄
  context.stroke();// 绘制线
  context.fill();// 绘制填充色块
  
  // 对当前画布上的指定矩形区域进行刷新，会用在动画的时候对屏幕进行一次清空，之后进行重绘制
  context.clearRect(x,y,width,height);
  
  // 找到该上下文绘图环境对应的画布，从而调用画布的其他属性
  context.canvas

Canvas

• // 画布大小
  canvas.width
  canvas.height
  
  //上下文绘图环境
  canvas.getContext('2d');

Animation

• setInterval(function(){
      render();
      update();
  },50)