HTML5CanvasAPI中drawImage()方法的使用代碼實例分享（圖）

來源：懂視網責編：小采時間：2020-11-27 15:11:32

HTML5CanvasAPI中drawImage()方法的使用代碼實例分享（圖）

HTML5CanvasAPI中drawImage()方法的使用代碼實例分享（圖）:這篇文章主要介紹了HTML5 Canvas API中drawImage()方法的使用實例,drawImage()方法主要用來對圖像進行縮放或裁剪,文中給出了其坐標及相關參數的用法,需要的朋友可以參考下drawImage()是一個很關鍵的方法，它可以引入圖像、畫布、視頻，并對其進行縮放或裁剪。

推薦度：

點擊下載本文 文檔為doc格式

導讀HTML5CanvasAPI中drawImage()方法的使用代碼實例分享（圖）:這篇文章主要介紹了HTML5 Canvas API中drawImage()方法的使用實例,drawImage()方法主要用來對圖像進行縮放或裁剪,文中給出了其坐標及相關參數的用法,需要的朋友可以參考下drawImage()是一個很關鍵的方法，它可以引入圖像、畫布、視頻，并對其進行縮放或裁剪。

這篇文章主要介紹了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);

來看一下坐標草圖：

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

參數	描述
img
sx	可選。開始剪切的 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()對圖片的處理就很重要了。即使基本功，也是對圖片最重要的處理方法。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

HTML5CanvasAPI中drawImage()方法的使用代碼實例分享（圖）

推薦度：

點擊下載本文 文檔為doc格式

標簽：方法代碼 html

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

HTML5CanvasAPI中drawImage()方法的使用代碼實例分享（圖）

HTML5CanvasAPI中drawImage()方法的使用代碼實例分享（圖）

HTML5CanvasAPI中drawImage()方法的使用代碼實例分享（圖）

最新推薦

猜你喜歡

熱門推薦