利用HTML5 Canvas API绘制矩形的超级攻略

cxt.lineWidth = 5;

cxt.strokeStyle = "white";

cxt.stroke(); }

</script> </body>

</html> </body>

</html>

运行结果：
2016321105841741.jpg (850×500)

是不是很有魔性？是不是非常的酷？这段代码就不花篇幅解释了，大家自己课下琢磨琢磨，也可以尝试着用已经学过的知识去绘制一个酷酷的图像。这节课内容有点多，其实也只是介绍了四个属性和方法——closePath()、fillStyle、fill()、rect()，还有一个扩展的JavaScript函数讲解。

Canvas实现图片圆角效果
本规则适用于各种Canvas绘制的规则或不规则图形。

Canvas实现图片圆角的关键是使用“纹理填充”。

Canvas中有个名为createPattern的方法，可以让已知尺寸的图片元素转换成纹理对象，作填充用。

举个板栗，如果实现名为test.jpg的图片圆形效果，大小100px * 100px, 则主要JS代码如下：

JavaScript Code复制内容到剪贴板

// canvas元素, 图片元素 var canvas = document.querySelector("#canvas"), image = new Image();
var context = canvas.getContext("2d");
image.onload = function() { // 创建图片纹理
var pattern = context.createPattern(image, "no-repeat"); // 绘制一个圆
context.arc(50, 50, 50, 0, 2 * Math.PI); // 填充绘制的圆
context.fillStyle = pattern; context.fill();
}; image.src = "test.jpg";

让Canvas上下文的fillStyle属性值等于这个纹理对象就可以了。

Canvas自带的矩形绘制API是不带圆角属性的，因此，demo中的圆角矩形使用了自定义方法。我简单瞅了瞅，要实现垂直、水平方向不同圆角大小略折腾，本着示意的目的，就没大动干戈，所以demo的圆角是对称的。