js キャンバスは角丸画像を実現します

この記事では、角を丸くするためのjsキャンバスの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

角の丸い画像のコード実装:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
</head>
<body style="background: rgba(199,237,204,1)">
 
<div style="display:flex; flex-direction: row">
 
    <!-- スタイルを使用してキャンバスの幅と高さを設定すると、描画されたコンテンツが Firefox 上で垂直方向に伸びます。 。 。 -->
    <canvas id="drawing" width="400px" height="400px">描画するキャンバス</canvas>
 
    <pre id="コンテナ" style="margin: 10px"/>
 
    <img src=//img.jbzj.com/file_images/article/202109/202191115608734.jpg>
</div>
</本文>
<script type="text/javascript">
 
    window.onlοad = 関数 () {
        var 描画 = document.getElementById('描画');
 
        描画コンテキストを取得する場合
            print('サポート')
            RoundRectFunc() を追加します。
            var context = drawing.getContext('2d');
            描画(コンテキスト);
 
        } それ以外 {
            print('not') を出力します。
        }
    }
 
 
    関数draw(コンテキスト) {
        context.fillStyle = '赤';
 
        var image = document.images[0];
 
        context.roundRect(0,0,image.width/2,image.height/2,30,true)
 
        context.globalCompositeOperation='ソースイン';
        context.drawImage(画像、0、0、画像の幅/2、画像の高さ/2)
        // toImage();
 
    }
 
    関数addRoundRectFunc() {
        CanvasRenderingContext2D.prototype.roundRect =
            関数 (x, y, 幅, 高さ, 半径, 塗りつぶし, ストローク) {
                if (typeof ストローク == "未定義") {
                    ストローク = true;
                }
                if (typeof radius === "undefined") {
                    半径 = 5;
                }
                このメソッドは、次のようになります。
                this.moveTo(x + 半径, y);
                this.lineTo(x + 幅 - 半径, y);
                this.quadraticCurveTo(x + 幅, y, x + 幅, y + 半径);
                this.lineTo(x + 幅、y + 高さ - 半径);
                this.quadraticCurveTo(x + 幅、y + 高さ、x + 幅 - 半径、y + 高さ);
                this.lineTo(x + 半径, y + 高さ);
                this.quadraticCurveTo(x, y + 高さ, x, y + 高さ - 半径);
                this.lineTo(x, y + 半径);
                this.quadraticCurveTo(x, y, x + 半径, y);
                this.closePath();
                if (ストローク) {
                    この.stroke();
                }
                if (fill) {
                    これを塗りつぶします。
                }
            };
    }
 
    関数toImage() {
        var imageUri = drawing.toDataURL('image/png');
        var imageTag = document.createElement('img');
        imageTag.style = '余白:10px;幅:200px;高さ:200px'
        イメージタグ.src = イメージUri;
        document.body.appendChild(画像タグ)
    }
 
    関数 print(txt) {
        document.getElementById("コンテナ").innerHTML += ('\n') + txt;
    }
 
    document.body.onclick = 関数（）{
        ウィンドウの場所を再読み込み()
    }
    console.log = 印刷;
 
 
</スクリプト>
 
 
</html>

効果画像:

小さなコードを追加します: キャンバスは角が丸い画像 (アバターなど) を生成します

円画像(ctx, 画像, 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(画像, x, y, d, d);
    ctx.restore();
  }

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: