【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]
触摸[]
