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值，擦除的宽度，高度
动画
- 原理：擦出-绘制-擦出-绘制 ·····
- 一般配合定时器使用
