canvas实现图片圆边
效果
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>实现圆角</title>
</head>
<body>
<strong>这是原图</strong>
<p><img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" width="256" height="191"></p>
<strong>这是Canvas实现</strong>
<p>圆角大小：<span class="range-txt"> 0 <input id="radiusInput" type="range" min="0" max="92" value="0"> 92</span></p>
<canvas id="canvas" width="256" height="191"></canvas>
<script type="text/javascript">
//圆角矩形
CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
var min_size = Math.min(w, h);
if (r > min_size / 2) r = min_size / 2;
// 开始绘制
this.beginPath();
this.moveTo(x + r, y);
this.arcTo(x + w, y, x + w, y + h, r);
// this.arcTo(x + w, y + h, x, y + h, r);
this.lineTo( x + w , y + h ) // 直角不变化
this.arcTo(x, y + h, x, y, r);
this.arcTo(x, y, x + w, y, r);
this.closePath();
return this;
}
// canvas元素, 图片元素
var canvas = document.querySelector("#canvas"), image = new Image(), input = document.getElementById("radiusInput");
var context = canvas.getContext("2d");
var draw = function(obj) {
// 创建图片纹理
var pattern = context.createPattern(obj, "no-repeat");
// 如果要绘制一个圆，使用下面代码
// context.arc(obj.width / 2, obj.height / 2, Math.max(obj.width, obj.height) / 2, 0, 2 * Math.PI);
// 这里使用圆角矩形
context.roundRect(0, 0, obj.width, obj.height, input.value * 1 || 0);
// 填充绘制的圆
context.fillStyle = pattern;
context.fill();
}
image.src = "http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg";
image.onload = function() {
draw(this);
};
input.addEventListener("change", function() {
context.clearRect(0, 0, canvas.width, canvas.height);
draw(image);
});
</script>
</body>
</html>