用canvas绘制线段

2022-07-22 19:36:47 阅读：147 来源： 互联网

要利用canvas绘画，首先要在HTML中添加canvas标签

<body>
<canvas>
            明天不放假！！！！！
</canvas>
</body>

在JavaScript中获取节点并得到“绘制上下文”对象

var canvas = document.querySelector("canvas")
//获取标签名为canvas的节点
var ctx = canvas.getContext("2d")
//获得绘制上下文对象

接下来就可以绘制了

ctx.beginPath()
//用于定义一条新的路径，第一条路径可以不写
ctx.moveTo(100, 100)
//开始定义一条新的子路径，该方法确定了线段的起点为（100,100）
ctx.lineTo(300, 300)
//将上面定义的线段起点和指定的新的点连接起来
//要画线段的话以上两个属性是成对出现的
ctx.closePath()
//会把起点和终点连接起来
ctx.strock()
//开始绘制图形，当前路径下的所有子路经都会绘制出来
ctx.linewidth=10
//改变线条的宽度
ctx.stroke.Style="purple"
//改变线条的颜色

注意：在进行线条的属性更改时要在strock之前

标签：canvas,线段,路径,ctx,100,绘制
来源： https://www.cnblogs.com/forever-ljf/p/16506806.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

用canvas绘制线段