示例示例Canvas 图片圆角可以通过使用 canvas 的 clip 方法来实现,下面是一个代码示例:
Canvas 图片圆角可以通过使用 canvas 的 clip 方法来实现,下面是一个代码示例:
javascript
// 获取 canvas 元素
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
// 加载图片
let img = new Image();
img.src = 'your_image.png';
img.onload = function() {
// 将图片绘制到 canvas 上
ctx.drawImage(img, 0, 0);
// 设置圆角半径
let radius = 20;
// 创建圆形路径
ctx.beginPath();
ctx.arc(radius, radius, radius, 0, Math.PI * 2, false);
ctx.closePath();
// 裁剪
ctx.clip();
// 将图片绘制到 canvas 上
ctx.drawImage(img, 0, 0, radius * 2, radius * 2);
}
本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处
评论列表(59条)