返回 导航

HTML5 / CSS3

hangge.com

HTML5 - Canvas的使用样例3(使用路径绘制自定义形状,并填充)

作者:hangge | 2016-01-17 10:08
下面通过样例演示使用路径绘制一个三角形并进行填充。

1,绘制时要注意如下两个地方:
(1)路径绘制完毕后,要调用 closePath() 来明确地关闭路径。
(2)看下面代码其实我只画了两条边,因为 closePath() 会自动在最后一个绘制点与绘制起点间绘制一条线。
(3)最好先填充颜色,再绘制轮廓,否则轮廓线会有一部分被填充色覆盖掉。
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

//绘制路径
context.moveTo(200, 50);
context.lineTo(100, 150);
context.lineTo(300,150);
context.closePath();

//填充内部
context.fillStyle = "orange";
context.fill();

//绘制轮廓
context.lineWidth = 10;
context.strokeStyle = "#cd2828";
context.stroke();

2,设置绘图上下文的lineJoin属性指定线段交点的形状 
(1)mitre:锐角斜切(默认值)
(2)round:圆头
context.lineJoin = "round";
(3)bevel:平头斜切
context.lineJoin = "bevel";
评论

全部评论(0)

回到顶部