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

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

創(chuàng)新互聯(lián)建站主營(yíng)羅湖網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP開(kāi)發(fā),羅湖h5微信小程序開(kāi)發(fā)搭建,羅湖網(wǎng)站營(yíng)銷推廣歡迎羅湖等地區(qū)企業(yè)咨詢

效果截圖：

代碼：

<!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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：html5中如何實(shí)現(xiàn)圖像裁剪
標(biāo)題來(lái)源：http://muchs.cn/article14/iegede.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、網(wǎng)站改版、微信公眾號(hào)、品牌網(wǎng)站建設(shè)、軟件開(kāi)發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容