首頁 >web前端 >H5教程 >HTML5 Canvas API中drawImage()方法的使用程式碼實例分享（圖）

HTML5 Canvas API中drawImage()方法的使用程式碼實例分享（圖）

黄舟原創: 2017-03-15 16:19:091320瀏覽

這篇文章主要介紹了HTML5 Canvas API#中drawImage()方法的使用實例,drawImage()方法主要用來縮放或裁切,文中給了其座標及相關參數的用法,需要的朋友可以參考下

drawImage()是一個很關鍵的方法，它可以引入圖像、畫布、影片，並對其進行縮放或裁剪。

一共有三種表現形式：

語法1

context.drawImage(img,dx,dy);

語法2

context.drawImage(img,dx,dy,dw,dw);

語法3

##JavaScript Code複製內容到剪貼簿

context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);

來看座標草圖：

HTML5 Canvas API中drawImage()方法的使用程式碼實例分享（圖）

PS : 不要在樣式中定義5ba626b379994d53f7acf72a64f9b697 的寬與高，否則，裡面所畫的

圖片會自動放大或縮小。三參數的是標準形式，可用於載入影像、畫布或影片；五參數的除了可以載入影像還可以對影像進行指定寬高的縮放；九參數的除了縮放，還可以裁剪。各參數意義見下表。

參數img#sx#可選。開始剪切的 x 座標位置。 sy可選。開始剪切的 y 座標位置。 s可選。被剪切影像的寬度。 s可選。被剪切影像的高度。 x在畫布上放置影像的 x 座標位置。 y在畫布上放置影像的 y 座標位置。 width可選。要使用的圖像的寬度。（伸展或縮小影像）height要使用的影像的高度。（伸展或縮小圖像）

	描述



width
height

下面，我們載入一個圖片試試。

JavaScript Code复制内容到剪贴板
<!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>drawImage()</title>   
    <style>   
        body { background: url("./images/bg3.jpg") repeat; } 
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    </style>   
</head>   
<body>   
<p id="canvas-warp">   
    <canvas id="canvas">   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    </canvas>   
</p>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
        context.fillStyle = "#FFF";   
        context.fillRect(0,0,800,600);   
  
        var img = new Image();   
        img.src = "./images/20-1.jpg";   
        img.onload = function(){   
            context.drawImage(img,200,50);   
        }   
    };   
</script>   
</body>   
</html>

#執行結果：

HTML5 Canvas API中drawImage()方法的使用程式碼實例分享（圖）

建立相框：

這裡，我們結合
clip()和drawImage()以及三次貝塞爾曲線bezierCurveTo()，來為上面一個案例，加上一個心形的相框~

JavaScript Code复制内容到剪贴板
<!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>绘制心形相框</title>   
    <style>   
        body { background: url("./images/bg3.jpg") repeat; } 
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    </style>   
</head>   
<body>   
<p id="canvas-warp">   
    <canvas id="canvas">   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    </canvas>   
</p>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
        context.fillStyle = "#FFF";   
        context.fillRect(0,0,800,600);   
  
        context.beginPath();   
        context.moveTo(400,260);   
        context.bezierCurveTo(450,220,450,300,400,315);   
        context.bezierCurveTo(350,300,350,220,400,260);   
        context.clip();   
        context.closePath();   
  
        var img = new Image();   
        img.src = "./images/20-1.jpg";   
        img.onload = function(){   
            context.drawImage(img,348,240,100,100);   
        }   
    };   
</script>   
</body>   
</html>

運行結果：

HTML5 Canvas API中drawImage()方法的使用程式碼實例分享（圖）

是不是美美的？好啦，至此最關鍵的遮罩和圖像裁剪以及說完了，其實在java.awt中，drawImage()也是一個至關重要的方法。有人說要製作Java遊戲介面，只要會用drawImage()就可以一招打遍天下~在Canvas裡也是一樣的。美工提供的素材基本上都是圖片，這時候drawImage()對圖片的處理就很重要了。即使基本功，也是圖片最重要的處理方式。

以上是HTML5 Canvas API中drawImage()方法的使用程式碼實例分享（圖）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：使用HTML5 Canvas API中的clip()方法裁剪區域圖像程式碼實例下一篇：使用HTML5 Canvas API中的clip()方法裁剪區域圖像程式碼實例

看更多