重慶達內IT培訓
美國上市IT培訓機構

15023458194

重慶web前端培訓班:圖片裁切

  • 時間:2021-03-30 13:29
  • 發布:重慶達內
  • 來源:重慶達內

此處的裁切與上面所說的切片不同,區別在于裁切僅僅是在圖像源上裁下指定路徑大小的圖片,

并不做任何處理,比如 位移、縮放等都保留與源圖像一致。

語法:ctx.clip();

說明:該方法不需要任何參數,但在執行clip之前先要繪制好裁切路徑(一個封閉區域),在

執行clip之后需要使用drawImage()方法引入圖像。

代碼示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
    <canvas id="canvasImage" width="1500" height="800"></canvas>
    <script>
        var canvas=document.getElementById('canvasImage');
        var ctx=canvas.getContext('2d');
    //  創建圖片對象
        var img=new Image();
        img.src='../Images/rotation01.jpg';
    //  創建圖片加載事件
        img.onload=function () {
            ctx.beginPath();
            ctx.arc(230,278,150,0,2*Math.PI,false);      //繪制圓形裁切路徑。
            // ctx.rect(80,120,300,315);                   //繪制矩形裁切路徑。
            ctx.clip();
            ctx.drawImage(img,10,10);
            }
    </script>
</body>
上一篇:重慶WEB前端培訓機構:圖像繪制
下一篇:重慶web前端培訓:圖像樣式

重慶WEB前端培訓班:箭頭函數的副作用

重慶web前端培訓機構:jQuery中的入口函數

重慶web前端培訓:圖像樣式

重慶web前端培訓班:圖片裁切

  • 關注微信公眾號

    回復關鍵字:視頻資料

    免費領取 達內課程視頻學習資料

  • 視頻學習QQ群

    添加QQ群:1143617948

    免費領取達內課程視頻學習資料

Copyright ? 2018 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

選擇城市和中心
江西省

貴州省

廣西省

海南省

免费V片无码动漫在线观看网址-男人的天堂无码动漫av