3.5-Canvas基础

线

beginPath() // 开始，以fill或stroke结束
closePath() // 非必要，会自动连接起点和当前点
stroke() // 轮廓
fill() // 填充
moveTo() // 移动不画
lineTo() // 直线
new Path2D("M10 10 h 80 v 80 h -80 Z"); // SVG path
ctx.lineWidth = 1+i; // 线条宽度
ctx.setLineDash([4, 2]); // 虚线

圆

弧度

arc(x,y,radius,startAngle,endAngle,anticlockwise) // 默认逆时针
arcTo(x1,y1,x2,y2,radius) // 两点加半径画弧线

贝塞尔曲线

quadraticCurveTo(cp1x,cp1y,x,y) // 二次，一个控制点和一个结束点
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)  // 三次，两个控制点一个结束点

矩形

fillRect(x,y,w,h) // 起点，宽高
strokeRect()
clearRect()

颜色

ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.globalAlpha = 0.2; // 全局透明度
createLinearGradient(x1,y1,x2,y2); // 线性渐变
createRadialGradient(x1,y1,r1,x2,y2,r2); // 径向渐变

文字

fillText(text,x,y) 
strokeText(text,x,y) 
font textAlign textBaseline // 文本样式
ctx.measureText("foo") // 测量文本宽度

坐标

以左上角为起点

image.png

其他

• 缩放
• 位移
• 旋转
• 动画
• 图片 imageData对象