小tip: SVG和Canvas分别实现图片圆角效果

by zhangxinxu from http://www.zhangxinxu.com
本文地址： http://www.zhangxinxu.com/wordpress/?p=4242

一、图片覆盖和CSS3 border-radius实现圆角

图片覆盖
找个中间镂空的图片覆盖在原始图片上，需要跟网页底色一致。

CSS3 border-radius

.xxx { border-radius: 100px; }

上面两个方法demo有，截图有~

可是demo上的图片素材一不小心放了个大，我不想换图片，地址就不放了，大家可以YY下。截图嘛，最后给~

二、SVG实现图片圆角效果

本处的实现原理适用于各种SVG规则的或不规则的图形。

SVG实现图片圆角关键是借助元素 <pattern>.

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

<svg width="100" height="100">
    <desc>SVG圆角效果</desc>
    <defs>
        <pattern id="raduisImage" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="test.jpg" x="0" y="0" width="625" height="605" />
        </pattern>
    </defs>
    <circle cx="50" cy="50" r="50" fill="url(#raduisImage)"></circle>
</svg>

图形元素都有一个 fill属性，让其值 url锚向 <pattern>的id就可以了。

这个demo有，您可以狠狠地点击这里： SVG实现圆角图片demo

滑动滑块，可以看到水平/垂直方向圆角大小的变化。受制于图片高宽比不一致，圆角的极限就是规矩的椭圆：

demo示意的是 <rect>元素，顾名矩形元素，如果想要实现正圆效果，请使用 <circle>元素，如上面示意的SVG的代码。当然，你还可以使用 <path>元素做不规则填充，创建更有意思的图形效果。

三、Canvas实现图片圆角效果

本规则适用于各种Canvas绘制的规则或不规则图形。

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

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

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

// 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属性值等于这个纹理对象就可以了。

这个demo有，您可以狠狠地点击这里： Canvas实现圆角图片demo

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

demo示意的是圆角矩形效果，如果想要实现正圆效果，请使用 arc方法绘制，如上面示意的JS的代码。当然，你还可以绘制其他不规则造型做填充，创建更有意思的图形效果。

四、意义何在

CSS3实现圆角效果多简单，同样SVG, Canvas兼容性也不咋滴，那为何还要折腾SVG, Canvas的圆角效果呢？

我只想说：“天生我材必有用，千金散尽还复来”。

五、年中结语

今天6月30号，上半年的最后1天，于是，今天的结语荣升为年中结语。

得弄一句牛逼的结语压场啊，啊，有了：“世界既不是薄的，也不是厚的，归根结底是平的。”。

嗯哪，最后，附上一开始恋恋不舍放置的截图（近70K），涵盖：图片覆盖，CSS3, SVG, Canvas实现效果和代码展示（ 点击灰色背景块显示）。

本文为原创文章，含脚本行为，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址： http://www.zhangxinxu.com/wordpress/?p=4242

（本篇完）