html5图片圆形-小提示：SVG和Canvas分别实现图片圆角效果

bendan520 html5

2023-09-03 0 4,943 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

1.图片叠加和CSS3border-radius实现圆角

图片叠加

找一张中间镂空的图片覆盖原图，需要和网页的背景颜色一致。

CSS3边框半径

.xxx { border-radius: 100px; }

有前两种方法的demo和截图~

但demo上的图片素材不小心被放大了。我不想换图片，所以地址就不公布了。你可以YY它。截图一下，在最后给个~

2.SVG实现图片圆角效果

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

SVG中实现图片圆角的关键是使用元素

例如杨梅，如果一张名为test.jpg的图片有一个大小为100px*100px的正方形效果，则SVG代码如下：

图形元素有一个fill属性，让它的值url锚定到

id就可以了

有这个demo，大家可以硬点这里：SVG圆角图像demo

滑动滑块可查看水平/垂直方向圆角大小的变化。由于图片长宽比不一致，圆角的极限是规则的椭圆：

该演示展示了一个元素，顾名思义，是一个方形元素。如果你想实现完美的圆形效果，请使用一个元素，比如上面所示的SVG代码。其实你也可以使用

元素不规则地填充，以创造更有趣的图形效果。

3.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";