溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html5中如何實(shí)現(xiàn)圖像裁剪

發(fā)布時(shí)間：2021-01-30 14:32:06 來(lái)源：億速云 閱讀：220 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要介紹html5中如何實(shí)現(xiàn)圖像裁剪，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

效果截圖：

html5中如何實(shí)現(xiàn)圖像裁剪

代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<script>
    // 圖像裁剪：context.clip()

    // context.clip()只繪制封閉路徑區(qū)域內(nèi)的圖像，不繪制路徑外部圖像，用的時(shí)候

    // 先創(chuàng)建裁剪區(qū)域

    // 再繪制圖像（之后繪制的圖形都會(huì)采用這個(gè)裁剪區(qū)域，要取消這個(gè)裁剪區(qū)域就需要用到保存恢復(fù)狀態(tài)，下面有講）

    // 給出圓形和星形的裁剪代碼
     function createCircleClip(context) {
        context.beginPath();
        context.arc(200, 170, 100, 0, Math.PI * 2, true);
        context.closePath();
        context.clip();
    }

    function create5StarClip(context) {
        var n = 0;
        var dx = 200;
        var dy = 150;
        var s = 150;
        context.beginPath();
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 5 * 4;
        for (var i = 0; i < 5; i++) {
           var x = Math.sin(i * dig);
           var y = Math.cos(i * dig);
           context.lineTo(dx + x * s, dy + y * s);
        }
        context.closePath();
        context.clip();
    } 

	function draw() {
        var canvas = document.getElementById("mycanvas");
        if (canvas == null)
         return false;

        var context = canvas.getContext("2d");

        context.fillStyle = "black";
        context.fillRect(0, 0, 400, 300);
        image = new Image();
        image.src = "Image/html5.jpg"

        image.onload = function () {
            //圓形裁剪區(qū)
            //createCircleClip(context)
            //星形裁剪區(qū)
            create5StarClip(context);
            context.drawImage(image,0,0);
        }
        
	} 		

	window.onload=draw;
</script>
</head>
<body>
  <p id="p1"></p>
  <canvas id="mycanvas" width="1000" height="800">當(dāng)前瀏覽器不支持canvas</canvas>
</body>
</html>

以上是“html5中如何實(shí)現(xiàn)圖像裁剪”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手