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

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

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

效果截圖：

代碼：

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

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

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

    // 再繪制圖像（之后繪制的圖形都會采用這個裁剪區(qū)域，要取消這個裁剪區(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中如何實現(xiàn)圖像裁剪”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

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

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

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

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

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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