js canvas realizes rounded corners picture

This article shares the specific code of js canvas to achieve rounded corners for your reference. The specific content is as follows

Code implementation of rounded corner images:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background: rgba(199,237,204,1)">
 
<div style="display:flex; flex-direction: row">
 
    <!-- Setting the width and height of the canvas through style causes the drawn content to stretch vertically on Firefox. . . -->
    <canvas id="drawing" width="400px" height="400px">canvas to draw</canvas>
 
    <pre id="container" style="margin: 10px"/>
 
    <img src=//img.jbzj.com/file_images/article/202109/202191115608734.jpg>
</div>
</body>
<script type="text/javascript">
 
    window.onlο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>

Effect picture:

Add a small code: canvas generates rounded corner images (avatars, etc.)

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();
  }

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS+CSS to achieve a complete example of a draggable beautiful rounded corner special effect pop-up layer
Abstract CSS rounded corner effect implemented with js!!
Using js to generate and update CSS rounded corners

<<: Centos7 configuration fastdfs and nginx distributed file storage system implementation process analysis

>>: How to find identical files in Linux