js canvas实现圆角图片
作者：万剑
这篇文章主要为大家详细介绍了js canvas实现圆角图片效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js canvas实现圆角图片的具体代码，供大家参考，具体内容如下
圆角图片的代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="background: rgba(199,237,204,1)">
<div style="display:flex; flex-direction: row">
<!--通过style方式为canvas设置宽高在火狐浏览器上导致绘制内容纵向拉伸。。。-->
<canvas id="drawing" width="400px" height="400px">canvas to draw</canvas>
<pre id="container" style="margin: 10px"/>
<img src=//img.jbzj.com/file_images/article/202109/202191115608734.jpg>
</div>
</body>
<script type="text/javascript">
window.οnlοad=function () {
var drawing = document.getElementById('drawing');
if (drawing.getContext) {
print('support')
addRoundRectFunc();
var context = drawing.getContext('2d');
draw(context);
} else {
print('not ')
}
}
function draw(context) {
context.fillStyle = 'red';
var image = document.images[0];
context.roundRect(0,0,image.width/2,image.height/2,30,true)
context.globalCompositeOperation='source-in';
context.drawImage(image, 0, 0, image.width / 2, image.height / 2)
// toImage();
}
function addRoundRectFunc() {
CanvasRenderingContext2D.prototype.roundRect =
function (x, y, width, height, radius, fill, stroke) {
if (typeof stroke == "undefined") {
stroke = true;
}
if (typeof radius === "undefined") {
radius = 5;
}
this.beginPath();
this.moveTo(x + radius, y);
this.lineTo(x + width - radius, y);
this.quadraticCurveTo(x + width, y, x + width, y + radius);
this.lineTo(x + width, y + height - radius);
this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
this.lineTo(x + radius, y + height);
this.quadraticCurveTo(x, y + height, x, y + height - radius);
this.lineTo(x, y + radius);
this.quadraticCurveTo(x, y, x + radius, y);
this.closePath();
if (stroke) {
this.stroke();
}
if (fill) {
this.fill();
}
};
}
function toImage() {
var imageUri = drawing.toDataURL('image/png');
var imageTag = document.createElement('img');
imageTag.style = 'margin:10px;width:200px;height:200px'
imageTag.src = imageUri;
document.body.appendChild(imageTag)
}
function print(txt) {
document.getElementById("container").innerHTML += ('\n') + txt;
}
document.body.onclick = function () {
window.location.reload()
}
console.log = print;
</script>
</html>
效果图：
补充一段使用小代码：canvas 生成圆角图片（头像等）
circleImg(ctx, img, x, y, r) {
ctx.save();
var d =2 * r;
var cx = x + r;
var cy = y + r;
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(img, x, y, d, d);
ctx.restore();
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。