canvas

2019-02-11 本文已影响0人书简_yu

2d上下文

var ctx = document.getElementById('cvs').getContext('2d')

绘制线条

 ctx.beginPath()

ctx.moveTo(x, y) // 起点
ctx.lineTo(x, y)  // 连线点
ctx.lineTo(x, y) // 连线点2
……

ctx.closePath()

添加样式

ctx.fillStyle = 'orangered'; // 填充颜色
ctx.fill(); // 填充

ctx.strokeStyle = 'beige' // 描边颜色
ctx.stroke(); // 描边

画线宽度 ctx.lineWidth = 2px;

矩形绘制

ctx.rect(x, y, w, h);

ctx.fillRect(x, y, w, h);
ctx.strokeRect(x, y, w, h);

圆形绘制

arc(x, y, r, startAngle, endAngle, true/false) // true/false 逆时针/顺时针

贝塞尔曲线

quadraticCurveTo(controlX, controlY, endX, endY) // 二次贝塞尔曲线

bezierCurveTo(cx1, cy1, cx2, cy2, endX, endY) // 三次贝塞尔曲线

绘制文字

ctx.fillText(text, x, y, maxWidth); // 填充绘制
ctx.strokeText(text, x, y, maxWidth); // 描边绘制