canvas

canvas繪制

• 獲取元素
  var canvas = document.getelementbyid('div1');
• 獲取上下文對象(畫筆)
  var ctx = canvas.getContext('2d');

繪制線條

ctx.beginPath();//下筆
ctx.moveTo();//下筆的位置
ctx.lineTo();//描述下一個點(diǎn)
ctx.lineTo();//描述下下個點(diǎn)
ctx.closePath();//是否封閉區(qū)域

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，開始的弧度值，結(jié)束的弧度值，方向
ctx.stroke();//不可少

繪制曲線

• 二次貝塞爾曲線
• 三次貝塞爾曲線

繪制文字

ctx.textAlign = 'center';//基準(zhǔn)點(diǎn)在文本的位置
ctx.textBaseline = 'middle';//基線
ctx.font = '50px 黑體';
ctx.fillText(text,x,y,maxWidth?);
//文本內(nèi)容，文本的坐標(biāo)x，坐標(biāo)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個參數(shù)，2345表示img標(biāo)簽在canvas中的位置和大小，6789表示img圖片的裁剪
};

擦除畫布上內(nèi)容

• ctx.clearReact(x, y, w, h);
• 擦除的起點(diǎn)x值，y值，擦除的寬度，高度

動畫

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