canvas绘制2个圆形图像

qq_25111883

已于 2024-07-04 16:06:14 修改

阅读量106

点赞数 2

文章标签：前端

于 2024-07-04 15:43:58 首次发布

本文链接：https://blog.csdn.net/qq_25111883/article/details/140181336

版权

<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById("myCanvas");
        let context = canvas.getContext("2d");
        context.lineWidth = 5;
        context.strokeStyle = "red";
        context.fillStyle = "#fff";


        let img = new Image();
        img.src = "./头像/ba89d8262f99ed01607f47ecdb9e8fc8.jpeg";
        img.onload = function() {
            context.save();
            context.beginPath();
            context.arc(canvas.width / 2, canvas.height / 2, canvas.width / 4, 0, Math.PI * 2);
            context.clip();
            context.drawImage(img, 0, 0, canvas.width, canvas.height);
            context.stroke()
            context.restore();
        };

        let img1 = new Image();
        img1.src = "./头像/20240429205625.png";
        img1.onload = function() {
            context.save();
            context.beginPath();
            context.arc(canvas.width / 2, canvas.height / 2, canvas.width / 6, 0, Math.PI * 2);
            context.clip();
            context.drawImage(img1, 0, 0, canvas.width, canvas.height);
            context.stroke()
            context.restore();
        };
    </script>
</body>

运行效果