Canvas画线

最新推荐文章于 2024-05-10 10:10:22 发布

原创最新推荐文章于 2024-05-10 10:10:22 发布 · 923 阅读

2 ·

CC 4.0 BY-SA版权

Canvas 专栏收录该内容

4 篇文章

订阅专栏

// 获取画布
var c = document.querySelector('canvas');
// 获取绘图对象
var ctx = c.getContext('2d');
// 开始位置
ctx.moveTo(100, 100);
// 结束位置
ctx.lineTo(300, 100);
// 线条颜色
ctx.strokeStyle = 'red';
// 线条粗细
ctx.lineWidth = 10;
ctx.stroke();

// 重置路径
ctx.beginPath();

ctx.moveTo(100, 150);
ctx.lineTo(300, 200);
ctx.lineTo(100, 250);
// 闭合路径
ctx.closePath();
// 连接处样式   round | bevel | miter(默认)
ctx.lineJoin = 'round';  
// 线帽(线两端的结束样式)  round | square | butt(默认)
ctx.lineCap='round';
ctx.strokeStyle = 'green';
ctx.stroke();

// 绘制虚线
ctx.moveTo(100, 300);
ctx.lineTo(400, 300);
// 线条长度 间隔(可传多个参数—线条长度和间隔依次循环)
ctx.setLineDash([20, 10]);
// ctx.setLineDash([10, 5, 20]);
ctx.stroke();

// 绘制弧线
     // 圆心坐标 半径 开始的弧度 结束的弧度 顺时针(默认-false)
ctx.arc(200, 150, 50, 0, 0.5*Math.PI, false);
ctx.stroke();

stroke()每执行一次画一次，所以线条颜色相同时可以只执行一次stroke()，且不用重置路径