图文详解怎样用html5 canvas画一条直线
第一给大家介绍用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画一条直线的具体内容,更多请关注百分百源码网其它相关文章!