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

    context.arc(50, 50, 50, 0, 2 * Math.PI);   
    // 填充绘制的圆   
    context.fillStyle = pattern;   
    context.fill();       
};   
image.src = "test.jpg";  

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

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