首先给大家介绍用canvas绘制直线需要用到的属性
moveto(x,y) 可以设置线条开始位置的坐标
lineto(x,y) 可以设置线条结束位置的坐标
linewidth可以设置线条的宽度
strokeStyle 可以设置线条的颜色
用canvas绘制直线，步骤详解：
1、用<canvas>标签在浏览器上定义一张画布，并给其一个ID名，可以根据自己的需要设置画布的大小、背景颜色等。
2、用var c=document.getElementByID("myCanvas")获取canvas元素
3、通过var ctx=c.getContext("2d")创建一个 context 对象
4、设置直线的起点和终点，开始位置moveto(25,25) ，结束位置lineto(175,175)
5、可以用ctx.linewidth = 5设置线条的宽度，ctx.strokeStyle = "red"设置线条的颜色
6、最后用ctx.stroke()画一条直线，就完成了
具体代码如下：
<!DOCTYPE HTML><HTML> <head> <Meta charset="UTF-8"> <Title></Title> </head> <body> <canvas ID="myCanvas" wIDth="200px" height="200px" style="border: 1px solID #000000;"></canvas> </body> <script type="text/JavaScript"> var c=document.getElementByID("myCanvas"); var ctx=c.getContext("2d"); ctx.moveto(25,25); ctx.lineto(175,175); ctx.linewidth = 5; ctx.strokeStyle = "red"; ctx.stroke(); </script></HTML>效果图：
以上给大家介绍了如何用canvas画一条直线，是canvas中最简单的部分，初学者一定要自己动手尝试，看看你能不能写出这样的效果，希望这篇文章对你有所帮助！
【相关教程推荐】
1. Html5视频教程
2. JavaScript视频教程
3. bootstrap教程 总结
以上是内存溢出为你收集整理的图文详解如何用html5 canvas画一条直线全部内容，希望文章能够帮你解决图文详解如何用html5 canvas画一条直线所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）