使用html5 Canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D
对象的主要属性和方法(有"()"者为方法)如下:
属性或方法 | 基本描述 |
---|---|
strokeStyle | 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象 |
globalAlpha | 定义绘制内容的透明度,取值在0.0(完全透明)和1.0(完全不透明)之间,默认值为1.0。 |
lineWidth | 定义绘制线条的宽度。默认值是1.0,并且这个属性必须大于0.0。较宽的线条在路径上居中,每边各有线条宽的一半。 |
lineCap | 指定线条两端的线帽如何绘制。合法的值是 "butt"、"round"和"square"。默认值是"butt"。你可以点击这里查看lineCap的具体示例,以帮助你更好地理解lineCap 。 |
beginPath() | 开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。它将重置内存中现有的路径。 |
moveTo(int x, int y) | 移动画笔到指定的坐标点(x,y) ,该点就是新的子路径的起始点 |
lineTo(int x, int y) | 使用直线连接当前端点和指定的坐标点(x,y) |
stroke(int x, int y) | 沿着绘制路径的坐标点顺序绘制直线 |
closePath() | 如果当前的绘制路径是打开的,则关闭掉该绘制路径。此外,调用该方法时,它会尝试用直线连接当前端点与起始端点来关闭路径,但如果图形已经关闭(比如先调用了stroke())或者只有一个点,它会什么都不做。 |
在Canvas的图形绘制过程中,几乎都是先按照一定顺序先定下几个坐标点,也就是所谓的绘制路径,然后再根据我们的需要将这些坐标点用指定的方式连接起来,就形成了我们所需要的图形。当我们了解了CanvasRenderingContext2D
对象的上述API后,那么绘制线条就显得非常简单了。
现在,我们就使用canvas来绘制最基本的直线
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Canvas绘制线条入门示例</title> </head> <body> <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 --> <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;"> 您的浏览器不支持canvas标签。 </canvas> <script type="text/javascript"> //获取Canvas对象(画布) var canvas = document.getElementById("myCanvas"); //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误 if(canvas.getContext){ //获取对应的CanvasRenderingContext2D对象(画笔) var ctx = canvas.getContext("2d"); //注意,Canvas的坐标系是:Canvas画布的左上角为原点(0,0),向右为横坐标,向下为纵坐标,单位是像素(px)。 //开始一个新的绘制路径 ctx.beginPath(); //定义直线的起点坐标为(10,10) ctx.moveTo(10, 10); //定义直线的终点坐标为(50,10) ctx.lineTo(50, 10); //沿着坐标点顺序的路径绘制直线 ctx.stroke(); //关闭当前的绘制路径 ctx.closePath(); } </script> </body> </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。