简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > H5教程 > 主體

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

黄舟
發布： 2017-03-15 16:19:09
原創
1270 人瀏覽過

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

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

一共有三種表現形式：

語法1


#
context.drawImage(img,dx,dy);
登入後複製



語法2

context.drawImage(img,dx,dy,dw,dw);
登入後複製

  1. 語法3

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

context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);
登入後複製

來看座標草圖：


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

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

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

參數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中文網其他相關文章！

相關標籤：
HTML5 ，Canvas ，drawImage()
來源：php.cn
上一篇：使用HTML5 Canvas API中的clip()方法裁剪區域圖像程式碼實例 下一篇：HTML5的Geolocation地理位置定位API使用方法詳解
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
來自於 2024-04-05 12:57:00
0
1
456
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！