【Canvas】笔记（零）API速查

【context】

var context = canvas.getContext('2d')

【属性】

context.fillStyle="rgba(255,255,255,0.8)"
context.strokeStyle="rgba(255,255,255,0.8)"
context.font= '18px Arial'

《线段》

context.lineWidth= <num>====================default: 1
context.lineCap= "butt" || "round" || "square"=======default: "butt"
context.lineJoin= "bavel" || "round" || "miter"=======default: "bavel"
context.miterLimit= <num>====================default: 10

【方法】

《global》

context.beginPath() =================会清除当前路径中的所有子路径
context.closePath() =================注意使用时机 / 似乎只对 stroke 起作用
context.moveTo(x,y)
context.lineTo(x,y)
context.stroke()
context.fill()
context.getImageData(x0,y0,x1,y1);
context.putImageData(ImgData,x0,y0);
context.drawImage(spritesheet, 0, 0);
var spritesheet = new Image();
context.isPointInPath(x,y)==============用以判断当前点是否在路径内（拖动时事件等）

《矩形操作》

context.rect(x,y,width,height)
context.clearRect(x,y,width,height)
context.strokeRect(x,y,width,height)
context.fillRect(x,y,width,height)

《圆》

context.arc(x,y,r,startAngle,endAngle,boolean)
最后一个参数布尔值，正为顺时针，否为逆时针。
context.arcTo(x0,y0,x1,y1,r)
设当前点为x,y，则由(x,y,x0,y0)组成的直线与由(x0,y0,x1,y1)组成的直线为两个直线，画出的圆弧将以r为半径并与这两个直线相切。

《文字》

context.strokeText("text content",x,y)
context.fillText("text content",x,y)

《渐变色》

var gradient = context.createLinearGradient(x0,y0,x1,y1)
gradient.addColorStop(percent,color)

线性渐变的规则是：以 x0,y0,x1,y1 表示的两点所成的线段为“签子”，串起整个渐变画面。

var gradient = context.createRadialGradient(x0,y0,r0,x1,y1,r1)

放射渐变的规则是：以 x0,y0,x1,y1 表示的两点所在位置以 r0，r1 为半径的圆形成的放射效果。

《贝赛尔曲线》
二次方贝赛尔曲线

context.quadraticCurveTo(
points[0].x, points[0].y,
points[1].x, points[1].y)、
第一个点是控制点，第二个点是锚点。会将锚点与当前路径的最后一个点连接。
三次方贝赛尔曲线
context.bezierCurveTo(
controlPoints[0].x,
controlPoints[0].y,
controlPoints[1].x,
controlPoints[1].y,
endPoints[1].x,
endPoints[1].y)
前两个点是控制点，第三个点是锚点。会将锚点与当前路径的最后一个点连接。

《图像》

var pattern = context.createPattern(image, repeatString)
repeatString = "repeat"/"repeat-x"/"repeat-y"/"no-repeat"

【扩展 context 对象】

CanvasRenderingContext2D.prototype.xxx

【canvas】

var canvas= document.getElementById("canvas")

【属性】

canvas.style.display = 'none';

【方法】

var dataUrl = canvas.toDataURL();
canvas.getBoundingClientRect();

【事件】

canvas.onmousedown=function(e){...} /
canvas.addEventListener("mousedown",function(e){...})
鼠标[mousedown,mousemove,mouseup,mouseout]
键盘[keydown,keypress,keyup]
触摸[]