社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > 主體

H5 Canvas API中drawImage(影像進行縮放或裁切)的使用實例

巴扎黑
發布： 2018-05-24 16:29:54
原創
16969 人瀏覽過

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

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

一共有三種表現形式：

語法1

JavaScript Code複製內容到剪貼簿

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

語法2

JavaScript Code


2016325103525710.png (360×360)



##.複製內容到剪貼簿context.drawImage(img,dx,dy,dw,dw);  JavaScript Code複製內容到剪貼簿

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

來看座標草圖：

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


2016325103645161.jpg (850×500)參數


描述

img

#sx
2016325103713253.jpg (300×286)#可選。開始剪切的 x 座標位置。

###sy######可選。開始剪切的 y 座標位置。 ############swidth######可選。被剪切影像的寬度。 ############sheight######可選。被剪切影像的高度。 ############x######在畫布上放置影像的 x 座標位置。 ############y######在畫布上放置影像的 y 座標位置。 ############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>
登入後複製
#########執行結果：### #########建立相框：###這裡，我們結合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>
登入後複製
#########執行結果：### #########是不是美美的？好啦，至此最關鍵的遮罩和圖像裁剪以及說完了，其實在java.awt中，drawImage()也是一個至關重要的方法。有人說要製作Java遊戲介面，只要會用drawImage()就可以一招打遍天下~在Canvas裡也是一樣的。美工提供的素材基本上都是圖片，這時候drawImage()對圖片的處理就很重要了。即使基本功，也是圖片最重要的處理方式。 ###

以上是H5 Canvas API中drawImage(影像進行縮放或裁切)的使用實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
canvas html5
來源：php.cn
上一篇：對HTML5中表單新增屬性的分析 下一篇：如何在網站上添加谷歌定位信息
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
來自於 2024-04-06 15:33:12
0
1
433
PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
來自於 2024-04-05 12:57:00
0
1
456
HTML5中的enctype和formenctype有什麼差別？ 我只是想知道HTMLLivingStandard（又稱新的HTML5規範）中的屬性enctype和formenctype之間有什麼區別？我一直在閱讀《開發人員的HTML標準》，但似...
來自於 2024-04-02 11:47:56
0
1
275
使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...
來自於 2024-04-01 20:42:38
0
1
259
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板