之前发现在网上无法找到相关的内容，找的内容测试也发现有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>

使用canvas生成一个圆形的图片

完整案例代码

猜你喜欢