视频中的演示似乎存在问题。。

来源：3-2 canvas 入门

戴JAVA老师的小迷弟

2020-10-25

视频中通过一下代码，实现了绘制两根线段，彼此拥有不同的长度(1和3)

ctx.beginPath()
ctx.lineWidth = 1
ctx.strokeStyle = 'blue'
ctx.moveTo(100, 100) //起点
ctx.lineTo(250, 75) //中间位置
ctx.stroke();
ctx.lineWidth = 3
ctx.lineTo(300, 75)
ctx.stroke() //绘制

然而操作下来的实际结果，发现调用stroke方法时绘制图像时还是以最后的设定的(线宽为3) 即绘制了两根一样长度的粗线。

没有能够实现视频中的效果。

写回答

1回答

扬_灵

2020-10-26

已采纳

同学你好，这跟canvas的绘制逻辑有关，当我们试图绘制一个线段时，canvas会读取lineWidth,，然后尝试将在坐标处两边各绘制一半的lineWidth,如果我们绘制的是前3后1的两条线段使用课程中的代码是没问题的，如果你想要设置前为1后为3的两条线段可以使用下面代码。思路是将两条线段分开渲染。

ctx.beginPath()
ctx.lineWidth = 1
ctx.strokeStyle = 'blue'
ctx.moveTo(100, 100) //起点
ctx.lineTo(250, 75) //中间位置
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 3
ctx.moveTo(250, 75)
ctx.lineTo(500, 75)
ctx.stroke() //绘制

戴JAVA老师的小迷弟

非常感谢！

2020-10-26

共1条回复

数据可视化入门到精通-打造前端差异化竞争力

同级别前端，掌握数据可视化薪资更高

1520 学习 · 1043 问题

查看课程

相似问题

stack 在Echart5中的实现与视频不符

回答 1

请问课程视频中的笔记在哪里查看