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

15023458194

重慶WEB前端培訓機構:圖像繪制

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

1.圖像繪制

在canvas中渲染圖片,使用“drawImage()”方法。

drawImage()方法有三種形態:基礎引入、圖片縮放、切片。

⑴ 基礎引入

語法:ctx.drawImage(img,x,y);

說明:參數img是一個image或canvas對象,(x,y)是圖像左上角的坐標。

⑵ 圖片縮放

語法:ctx.drawImage(img,x,y,width,height);

說明:在形態⑴的基礎上增加了“width”和“height”兩個參數,用于設置圖像

縮放后的寬度和高度。

⑶ 切片

語法:ctx.drawImage(img,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight);

說明:該種形態下,第一參數img與之前形態的意義相同,后面8個參數中,前4個參數

用于指定圖像源的切片位置和大小,后4個參數用于設置切片后的目標顯示位置

和大小。

⑷ 代碼示例

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.drawImage(img,10,10);           //圖片基礎引入
            ctx.drawImage(img,560,10,200,320);      //圖像縮放
            ctx.drawImage(img,80,120,300,315,780,10,200,208);     //切片處理
 
            }
    </script>
</body>
上一篇:重慶web培訓班:cript如何將漢字字符轉換成Unicode編碼?
下一篇:重慶web前端培訓班:圖片裁切

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

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

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

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

  • 關注微信公眾號

    回復關鍵字:視頻資料

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

  • 視頻學習QQ群

    添加QQ群:1143617948

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

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

選擇城市和中心
江西省

貴州省

廣西省

海南省

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