昨日阅读实践3小时,累计482hours
贝塞尔曲线
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.bezierCurveTo(50, 100, 200, 100, 200, 150); //定义贝塞尔曲线坐标
ctx.stroke();
弧线:canvas中并没有直接绘制圆弧的方法,这里是一种变通
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2*Math.PI*0.75); //设置圆弧坐标
ctx.stroke();
绘制圆形
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2*Math.PI); //设置圆坐标
ctx.stroke();
绘制三角形
ctx.beginPath();
ctx.moveTo(0,10); //三角形的起点
ctx.lineTo(200,20); //第二个点
ctx.lineTo(280, 100); //第三个点
ctx.closePath(); //第三个点与起点连接
ctx.stroke(); //绘制路径
绘制圆角矩形
ctx.beginPath();
ctx.moveTo(10, 10); //左上方开始
ctx.arcTo(100, 10, 100, 20, 10); //绘制右上方圆角
ctx.arcTo(100, 110, 90, 110, 10); //绘制右下方圆角
ctx.arcTo(0, 110, 0, 100, 10); //绘制左下方圆角
ctx.arcTo(0, 10, 10, 10, 10); //绘制左上方圆角
ctx.stroke();
可以考虑做成自定义函数来画圆角矩形,几个参数( x, y, w, h, r) 起始坐标点,矩形宽、高、圆角半径