使用HTML5 Canvas绘制直线或折线等线条的方法讲解

<body>

<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">

您的浏览器不支持canvas标签。 </canvas>

//获取Canvas对象(画布) var canvas = document.getElementById("myCanvas");

//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误

if(canvas.getContext){ //获取对应的CanvasRenderingContext2D对象(画笔)

var ctx = canvas.getContext("2d"); }

</script> </body>

</html>

如上述代码所示，我们可以使用Canvas对象的getContext()方法来获取CanvasRenderingContext2D对象。比较细心的读者应该注意到了：getContext()方法需要传入一个字符串——2d，获取到的CanvasRenderingContext2D对象的名称中也带有2D。这是因为，目前html5只支持2D绘图，但是在未来的html5中也可能支持3D或其他形式的绘图。届时，我们可能就需要使用getContext("3d")来获取CanvasRenderingContext3D对象并绘制3D图形了。

使用html5 canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下：

3/8 首页上一页 1 2 3 4 5 6 下一页尾页

相关文章大家在看

属性或方法	基本描述
strokeStyle	用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
globalAlpha	定义绘制内容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。
lineWidth	定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。
lineCap

使用HTML5 Canvas绘制直线或折线等线条的方法讲解

福昕阅读器如何复制文字

Dubbo 系列JDK SPI 原理解析

欲为王者至尊 888元志美4倍速DVD刻录机评测

拼音标注能手--中华拼读王

360随身WiFi怎么设置隐藏信号 360随身wifi隐藏信号

怎么用酷盘分享文件给好友

企业应如何防范内存抓取恶意软件

如何知道电脑是否含有病毒

美图秀秀让你的国庆旅游照片更出彩

u启动怎么用 U启动使用教程