初探HTML5——canvas元素（三）
2017-10-22 本文已影响0人
Sugar_Ye
这是关于canvas的第三个小节，还记得在第一小节中完成了哪些操作么？是的，关于直线的绘制。那么本小节，就做一件有意思的事情，利用直线绘制一个三角形。
一、绘制三角形
绘制三角形按照之前的理解需要4组坐标，而实际上只要3组坐标也能完成三角形的绘制。在调用closePath()方法关闭绘制路径之后，会将绘制路径的最后一点与绘制路径的起点连接起来。
程序的完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas演示绘制矩形</title>
<script type="text/javascript">
window.onload=function(){
//获取canvas对象的context（绘图上下文）
var context=document.getElementById('canvas').getContext("2d");
//绘制三角形（自定义形状）路径
context.moveTo(200,60);
context.lineTo(70,180);
context.lineTo(300,180);
//关闭路径
context.closePath();
//按顺序路径绘制图形
context.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>
浏览效果：
三角形绘制效果
二、扩展绘制线型
绘制线型一直是用的实现，那么可不可换成虚线呢？当然可以。
虚线绘制三角形
关键代码只有一行，其他的代码不变。setLineDash([array])方法需要传入数组作为参数。如果传入一个参数就是线长和间距一样。有兴趣的，可以多传几个参数玩玩。也许你能发现好玩的事情。
//定义线型为虚线，线长4，间隔10
context.setLineDash([4,10]);
添加代码的正确位置如下图：
PS:这些都是简单的开胃小菜，更多有趣的玩法敬请关注。
