首页 > 编程语言 > js canvas实现圆角图片
2023
01-03

js canvas实现圆角图片

本文实例为大家分享了js canvas实现圆角图片的具体代码，供大家参考，具体内容如下

圆角图片的代码实现：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!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">
  
    <!--通过style方式为canvas设置宽高在火狐浏览器上导致绘制内容纵向拉伸。。。-->
    <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.οnlο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>

效果图：

补充一段使用小代码：canvas 生成圆角图片（头像等）

?
1
2
3
4
5
6
7
8
9
10
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();
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自学编程网。

编程技巧