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

        cxt.beginPath();   
        cxt.rect(x, y, width, height);   
  
        cxt.lineWidth = 5;   
        cxt.strokeStyle = "black";   
  
        cxt.stroke();   
    }   
  
    function drawWhiteRect(cxt, x, y, width, height){   
        cxt.beginPath();   
        cxt.rect(x, y, width, height);   
  
        cxt.lineWidth = 5;   
        cxt.strokeStyle = "white";   
  
        cxt.stroke();   
    }   
</script>   
</body>   
</html>   
</body>   
</html>  

运行结果：

是不是很有魔性？是不是非常的酷？这段代码就不花篇幅解释了，大家自己课下琢磨琢磨，也可以尝试着用已经学过的知识去绘制一个酷酷的图像。这节课内容有点多，其实也只是介绍了四个属性和方法——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");   
    // 绘制一个圆