HTML5 Canvas绘制线条入门示例

来源于:

https://www.jb51.net/html5/439875.html

理论部分:

在html5中,canvas标签本身并没有任何行为,仅仅只是在页面上占用指定大小的页面空白空间。canvas标签就相当于一块空白的画布,还需要我们自己使用JavaScript提供的canvas API编写相应的代码从而在这块画布上绘制出我们想要的图形。

备注:canvas标签体内的文字内容将会在不支持html5的浏览器中显示。如上述html代码所示,如果你的浏览器不支持html5的canvas标签,那么将会在canvas标签处显示文字「您的浏览器不支持canvas标签」。

作为「画家」的我们,首先需要熟悉我们手中的画笔,也就是JavaScript中的Canvas对象及其相关内容。

在html5中,一个canvas标签就对应一个Canvas对象,我们在JavaScript可以使用document.getElementById()等常规函数来获取该对象。值得注意的是,在JavaScript中,我们并不是直接操作Canvas对象,而是通过Canvas对象来获取对应的图形绘制上下文对象CanvasRenderingContext2D,然后我们再利用CanvasRenderingContext2D对象自带的许多绘制图形的函数来绘图。

这就好像是每一张画布都对应一支画笔,要想在画布上绘画,我们就先要拿到对应的画笔,然后使用这支画笔在画布上绘图。CanvasRenderingContext2D对象就相当于这支画笔.

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

使用html5 canvas绘制线条(直线、折线等)

使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有”()”者为方法)如下:

  1. strokeStyle用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象globalAlpha定义绘制内容的透明度,取值在0.0(完全透明)和1.0(完全不透明)之间,默认值为1.0。
  2. lineWidth定义绘制线条的宽度。默认值是1.0,并且这个属性必须大于0.0。较宽的线条在路径上居中,每边各有线条宽的一半。lineCap指定线条两端的线帽如何绘制。合法的值是 “butt”、”round”和”square”。默认值是”butt”。
  3. beginPath()开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。它将重置内存中现有的路径。
  4. moveTo(int x, int y)移动画笔到指定的坐标点(x,y),该点就是新的子路径的起始点
  5. lineTo(int x, int y)使用直线连接当前端点和指定的坐标点(x,y)
  6. stroke(int x, int y)沿着绘制路径的坐标点顺序绘制直线
  7. closePath()如果当前的绘制路径是打开的,则关闭掉该绘制路径。此外,调用该方法时,它会尝试用直线连接当前端点与起始端点来关闭路径,但如果图形已经关闭(比如先调用了stroke())或者只有一个点,它会什么都不做。
HTML5 Canvas绘制线条入门示例

在Canvas的图形绘制过程中,几乎都是先按照一定顺序先定下几个坐标点,也就是所谓的绘制路径,然后再根据我们的需要将这些坐标点用指定的方式连接起来,就形成了我们所需要的图形。当我们了解了CanvasRenderingContext2D对象的上述API后,那么绘制线条就显得非常简单了。

画一条蓝色的直线

<!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, 50);   
	//定义直线的颜色
	ctx.strokeStyle = "blue";   
    //沿着坐标点顺序的路径绘制直线   
    ctx.stroke();   
    //关闭当前的绘制路径   
    ctx.closePath();   
}   
</script>   
</body>   
</html>  

画一条蓝色的折线:

HTML5 Canvas绘制线条入门示例
//开始一个新的绘制路径   
    ctx.beginPath();   
    //定义直线的起点坐标为(10,10)   
    ctx.moveTo(10, 10);   
	//定义中间点坐标1 
	ctx.lineTo(100,35);
	//定义中间点坐标2
	ctx.lineTo(50,100);
    //定义直线的终点坐标为(50,50)   
    ctx.lineTo(50, 50);   
	//定义直线的颜色
	ctx.strokeStyle = "blue";   
    //沿着坐标点顺序的路径绘制直线   
    ctx.stroke();   
    //关闭当前的绘制路径   
    ctx.closePath();   

补充

掌握上述内容后,相信大家对使用Canvas绘制线条有一些基本的了解了吧。由于对线条的宽度、透明度等控制只是设置单个属性即可,请参考上面的相关API,这里就不再赘述了。

强烈注意:在绘制图形路径时,一定要先调用beginPath()。beginPath()方法将会清空内存中之前的绘制路径信息。如果不这样做,对于绘制单个图形可能没什么影响,但是在绘制多个图形时(例如上面示例的两条直线),将会导致路径绘制或者颜色填充等操作出现任何意料之外的结果。

此外,对于closePath()方法,初学者一定要稍加注意,尤其是上面API表格中closePath()方法描述中的红色文字。在上面绘制折线的代码示例中,我们先调用了stroke(),再调用了closePath()。其实在调用stroke()方法时,折线就已经绘制好了,当前的绘制路径也就被关闭掉了,所以再调用closePath()方法时,它就不会使用直线连接当前端点和起始端点(也就是说,这里的closePath()是可有可无的,不过为了保持良好的习惯,还是建议写上)。如果我们交换一下stroke()和closePath()的调用顺序,则情况完全不一样了。由于closePath()先调用,此时绘制路径并没有关闭,那么closePath()将会用直线连接当前端点和起始端点。

交换stroke()和closePath()调用顺序后的示例代码如下:

交换调用顺序后,对应的显示效果如下:

HTML5 Canvas绘制线条入门示例
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论