溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“js中canvas如何實現圓角圖片”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“js中canvas如何實現圓角圖片”這篇文章吧。
圓角圖片的代碼實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body >
<div >
<!--通過style方式為canvas設置寬高在火狐瀏覽器上導致繪制內容縱向拉伸。。。-->
<canvas id="drawing" width="400px" height="400px">canvas to draw</canvas>
<pre id="container" />
<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();
}以上是“js中canvas如何實現圓角圖片”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
