HTML5 Canvas API中drawImage()方法的使用實例_html5教學技巧

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

總共有三種表現形式：

語法 1

JavaScript Code複製內容到剪貼簿

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

文法 2

JavaScript Code複製內容到剪貼簿

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

文法 3

JavaScript Code複製內容到剪貼簿

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

來看看座標草圖：

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

参数	描述
img
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	要使用的图像的高度。（伸展或缩小图像）

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

JavaScript Code複製內容到剪貼簿

1. html>   
2. "zh">   
3.   
4.      "UTF-8">   
5.        
6.     
7.         body { background: url("./images/bg3.jpg") /images/bg3.jpg") eat>;
8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
       
  
  
"canvas-warp">        "canvas">            你的瀏覽器居然不支援Canvas？ ！趕快換一個吧！ ！   
       
  
  
<script>   <li> <span>     window.onload = <li class="alt"><span>function<span class="keyword">(){    <span>         <li><span>var<span class="keyword"> canvas = document.getElementById(<span>">< <span class="string">        canvas.width = 800;    <span>         canvas.height = 600;   <li class="alt"> <span>         <li><span>var context = canvas.getContext(<li class="alt"><span>"21>"29><); <span class="keyword">        context.fillStyle = <span>"#FFF"<span class="string">;    <span>;    <li> <span> <span class="string">        context.fillRect(0,0,800,600);    <span>   <li class="alt"> <span>         <li><span>var img = <li class="alt"><🎜 <span>        img.src = <span class="keyword">"./images/20-1.jpg"<span>;   <span class="keyword"> ;   <span> ;   <li>        img.onload = <span>function<span class="string">(){   <span> (){   <li class="alt"> <span>(){   <span class="keyword"> <span>(){    <li>(){   <span> (){   <li class="alt"> <span>(){    <li> <span>            context.drawImage(img,200,50);    <li class="alt"> <span>        }    <li> <span>    };    <li class="alt"> <span></script>   

     

運行結果：

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

JavaScript Code複製內容到剪貼簿

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

  

  

  

    window.onload = 函數(){   

        var canvas = document.getElementById("   

        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         img.src = 

"./images/20-1.jpg";            img.onload = 

函數(){    (){   

            context.drawImage(img,348,240,100,100);   

        }   

    }；   

腳本>