之前发现在网上无法找到相关的内容,找的内容测试也发现有bug。遂,整理思路,自己研究一个可以实现效果的功能。
具体思路就是:首先获取到图片的资源,如果使用img加载的,那一定要等img触发onload以后处理。
我使用的图片是等宽高的图片,获取到图片资源以后,额外的创建一个canvas,将图像使用drawImage方法画到画布上,我们在这个canvas上面处理图像。通过canvas对象的context的createPattern创建一个pattern对象。这个对象不但可以实现重复图像,还可以将我们需要图像资源保存下来,并且赋值给填充对象fillStyle。
创建好pattern对象后,我们就可以使用clearRect方法,将画布清空。
然后,进行画圆操作,使用context的arc方法画圆。
最后,调用fill方法填充即可。
简单的案例代码:
ctx.fillStyle = ctx.createPattern(img, 'no-repeat');
ctx.clearRect(0, 0, num, num);
ctx.arc(r, r, r, 0, Math.PI * 2);
ctx.fill();
canvasCtx.drawImage(pixelCanvas, x - r, y - r, num, num);
由于急着下班,就没有单独写案例,从项目里面把代码拷贝出来显示一下。
重点就是需要创建一个额外处理图像的canvas,处理好以后就可以将这个canvas的数据使用drawImage方法放到你的canvas里面了。
完整案例代码
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas画布实现圆形图片</title>
</head>
<body>
<canvas id="canvas" style="margin: 0 auto; display: block;"></canvas>
<canvas id="pixelCanvas"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
let img = new Image();
//这里直接修改图片的路径
img.src = "meinv.jpg";
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext("2d");
//获取图片宽高的最小值
let min = Math.min(img.width, img.height);
let r = min/2;
ctx.fillStyle = ctx.createPattern(img, 'no-repeat');
ctx.clearRect(0, 0, img.width, img.height);
ctx.arc(img.width/2, img.height/2, r, 0, Math.PI * 2);
ctx.fill();
};
</script>
</html>