canvas

canvas绘制

• 获取元素
  var canvas = document.getelementbyid('div1');
• 获取上下文对象(画笔)
  var ctx = canvas.getContext('2d');

绘制线条

ctx.beginPath();//下笔
ctx.moveTo();//下笔的位置
ctx.lineTo();//描述下一个点
ctx.lineTo();//描述下下个点
ctx.closePath();//是否封闭区域

ctx.strokeStytle = 'red';
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.lineWidth = 5;
ctx.stroke();//画线

ctx.fillStyle = 'red';
ctx.fill();//填充

绘制矩形

ctx.fillRect(x,y,w,h);
ctx.strokeRect(x,y,w,h);

绘制圆形

ctx.beginPath();
ctx.arc(x,y,r,startAngle,endAngle,direction);
//圆心x，圆心y，半径r，开始的弧度值，结束的弧度值，方向
ctx.stroke();//不可少

绘制曲线

• 二次贝塞尔曲线
• 三次贝塞尔曲线

绘制文字

ctx.textAlign = 'center';//基准点在文本的位置
ctx.textBaseline = 'middle';//基线
ctx.font = '50px 黑体';
ctx.fillText(text,x,y,maxWidth?);
//文本内容，文本的坐标x，坐标y，最大文字宽度（可选）
ctx.strokeText(text,x,y,maxWidth?)

绘制图片

var img = new Image();
img.src = '';
img.onload = function(){
    ctx.drawImage(img，x,y);
    ctx.drawImage(img,x,y,w,h,x,y,w,h)
    //可以有9个参数，2345表示img标签在canvas中的位置和大小，6789表示img图片的裁剪
};

擦除画布上内容

• ctx.clearReact(x, y, w, h);
• 擦除的起点x值，y值，擦除的宽度，高度

动画

• 原理：擦出-绘制-擦出-绘制 ·····
• 一般配合定时器使用