Canvas學習記錄之drawImage

最新更新時間：2020年03月16日01:06:23

`《猛戳-查看我的博客地圖-總有你意想不到的驚喜》`

概述

本文內容：本文介紹基於drawImage()繪製圖片的一些基本用法，基本圖片、固定座標圖片、圖片裁剪、圖片寬高比壓縮、圓角圖片、圓形頭像圖片、在固定區域內水平垂直居中

drawImage(image, x, y)

從畫布座標(x,y)開始繪製圖片，圖片不會被裁剪，寬高比保持不變

drawImage(image, 0, 0)

從畫布原點座標開始繪製圖片，圖片不會被裁剪，寬高比保持不變

drawImage(image, 10, 10)

從畫布座標(10,10)開始繪製圖片，圖片不會被裁剪，寬高比保持不變

drawImage(image, x, y, width, height)

從畫布座標(x,y)開始繪製圖片，圖片不會被裁剪，width和height是畫布爲圖片開闢的可用寬高

如果width或height同時大於或等於圖片自身的寬高，此時圖片不會被壓縮顯示

如果width或height有一個小於圖片自身的寬高，此時圖片會在某一方向被壓縮顯示

drawImage(image, 0, 0, image.width, image.height)

從畫布原點座標開始繪製圖片，圖片不會被裁剪，寬高比保持不變

drawImage(image, 10, 10, image.width, image.height)

從畫布座標(10,10)開始繪製圖片，圖片不會被裁剪，寬高比保持不變

drawImage(image, 0, 0, 200, 100)

圖片自身寬高爲(200,100)，此時圖片不會被壓縮顯示

drawImage(image, 0, 0, 50, 100)

圖片自身寬高爲(200,100)，此時圖片在水平方向被壓縮顯示

drawImage(image, 0, 0, 200, 50)

圖片自身寬高爲(200,100)，此時圖片在垂直方向被壓縮顯示

drawImage(image, x1, y1, w1, h1, x2, y2, w2, h2)

(x1, y1)和(w1, h1)是裁剪圖片的起始座標和寬高

(x2, y2)和(w2, h2)是圖片在畫布上繪製的起始座標和畫布爲圖片開闢的可用寬高

drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height)

從畫布原點座標開始繪製圖片，圖片不會被裁剪，寬高比保持不變

drawImage(image, 100, 0, image.width, image.height, 0, 0, image.width, image.height)

圖片自身寬高爲(200,100)，從(100,0)裁剪圖片，裁剪的寬度image.width爲200，相當於橫向裁剪了100的空圖片

drawImage(image, 100, 0, 100, image.height, 0, 0, image.width, image.height)

圖片自身寬高爲(200,100)，從(100,0)裁剪圖片，裁剪的寬度image.width爲100，但畫布爲圖片開闢的可用寬度爲200，此時圖片水平方向被拉長一倍，圖片繪製出的寬高比發生變化

drawImage(image, 0, 0, image.width, image.height, 10, 10, image.width, image.height)

從畫布座標(10,10)開始繪製圖片，圖片不會被裁剪，寬高比保持不變

drawImage(image, 0, 0, image.width, image.height, 0, 0, 100, image.height)

圖片自身寬高爲(200,100)，畫布爲圖片開闢的可用寬度爲100，此時圖片在水平方向被壓縮顯示

drawImage(image, 0, 0, image.width, image.height, 10, 0, 100, image.height)

圖片自身寬高爲(200,100)，從畫布座標(10,0)開始繪製圖片，畫布爲圖片開闢的可用寬度爲100，此時圖片在水平方向被壓縮顯示

drawImage(image, 10, 10, image.width, image.height, 10, 10, image.width, image.height)

從(10, 10)裁剪圖片，從畫布座標(10,10)開始繪製圖片，圖片被裁剪，寬高比保持不變，

繪製圓形圖像

繪製寬高比1:1的圖像，圖片寬高(100, 100)

繪製寬高比1:1的圖像並裁剪爲圓形頭像，圖片寬高(100, 100)，從畫布原點座標開始繪製

//DOM
<img id="source" src="../file/drawImage.png" />
//JS
let image = document.getElementById('source');
image.onload = function(){
	//保存當前的繪畫樣式狀態
	ctx.save();
	//繪製一個圓形區域
	ctx.beginPath();
	ctx.arc(50, 50, 50, 0, 2 * Math.PI);
	ctx.clip();
	//繪製圖片
	ctx.drawImage(image, 0, 0, 100, 100);
	ctx.restore();
}

繪製寬高比2:1的圖像並裁剪爲圓形頭像，圖像在圓中水平垂直居中，裁剪後寬高比保持不變，圖片寬高(200, 100)，從畫布原點座標開始繪製

//DOM
<img id="source" src="../file/drawImage.png" />
//JS
var image = document.getElementById('source');
image.onload = function(){
	//圖片原始寬高
	let w = this.width;
	let h = this.height;
	//半徑
	let r = 50;
	//圓心座標
	let cx = 50;
	let cy = 50;
	//保存當前的繪畫樣式狀態
	ctx.save();
	//繪製一個圓形區域
	ctx.beginPath();
	ctx.arc(cx, cy, r, 0, 2 * Math.PI);
	ctx.clip();
	//繪製第一個圖片
	ctx.drawImage(image, w/2 - r, h/2 - r, 2*r, 2*r, 0, 0, 2*r, 2*r);
	ctx.restore();
	//繪製第二個圖片
	ctx.drawImage(image, 0, h);
	ctx.restore();
	//繪製第三個圖片
	ctx.drawImage(image, 50, 0, 100, 100, 0, 200, w/2, h);
	ctx.restore();
}

繪製寬高不定的圖像並裁剪爲圓形頭像，圓心和半徑不定，在畫布上繪製的起始座標不定，圖像在圓中水平垂直居中，裁剪後寬高比保持不變

//DOM
<img id="source" src="../file/drawImage.png" />
//JS
var image = document.getElementById('source');
image.onload = function(){
	//圖片原始寬高
	let w = this.width;
	let h = this.height;
	//起點座標
	let x = 40;
	let y = 10;
	//半徑
	let r = 50;
	//圓心座標
	let cx = r + x;
	let cy = r + y;
	//保存當前的繪畫樣式狀態
	ctx.save();
	//繪製一個圓形區域
	ctx.beginPath();
	ctx.arc(cx, cy, r, 0, 2 * Math.PI);
	ctx.clip();
	//繪製第一個圖片
	ctx.drawImage(image, w/2 - r, h/2 - r, 2*r, 2*r, cx-r, cy-r, 2*r, 2*r);
	ctx.restore();
	//繪製第二個圖片
	ctx.drawImage(image, 0, 150);
	ctx.restore();
	//繪製第三個圖片 (w, h) (200, 100)
	ctx.drawImage(image, 50, 0, 100, 100, 0, 300, w/2, h);
	ctx.restore();
}

繪製圓角矩形圖像

繪製寬高比1:1的圖像並裁剪爲10px的圓角，圖片寬高(100, 100)，從畫布原點座標開始繪製

//DOM
<img id="source" src="../file/drawImage.png" />
//JS
let image = document.getElementById('source');
image.onload = function(){
	//保存當前的繪畫樣式狀態
	ctx.save();
	//繪製一個圓角矩形
	radius();
	//繪製圖片
	ctx.drawImage(image, 0, 0, 100, 100);
	ctx.restore();
}
function radius(){
	//矩形起始座標
	let x =0;
	let y = 0;
	//圓角半徑10
	let r = 10;
	//矩形寬高
	let w = 100;
	let h = 100;
	//開始新路徑
	ctx.beginPath();
	//左上角圓角
	ctx.arc(x+r,y+r,r,Math.PI,Math.PI*3/2);
	//矩形上邊線
	ctx.lineTo(x+w-r, y);
	//右上角圓角
	ctx.arc(x+w-r,y+r,r,Math.PI*3/2,Math.PI*2);
	//矩形右邊線
	ctx.lineTo(x+w, y+h-r);
	//右下角圓角
	ctx.arc(x+w-r,y+h-r,r,0,Math.PI/2);
	//矩形下邊線
	ctx.lineTo(x+r, y+h);
	//左下角圓角
	ctx.arc(x+r,y+h-r,r,Math.PI/2,Math.PI);
	//矩形左邊線
	ctx.lineTo(x, y+r);//最後一條邊線可用 ctx.closePath() 完成繪製
	ctx.clip();
}

繪製寬高不定的圖像並裁剪爲圓角矩形，圓角尺寸不定，矩形寬高不定，在畫布上繪製的起始座標不定，圖像在矩形中水平垂直居中，裁剪後寬高比保持不變

//DOM
<img id="source" src="../file/drawImage.png" />
//JS
var image = document.getElementById('source');
image.onload = function(){
	//圖片原始寬高
	let tw= this.width;
	let th = this.height;
	//起點座標
	let x = 40;
	let y = 10;
	//圓角半徑
	let r = 20;
	//保存當前的繪畫樣式狀態
	ctx.save();
	//繪製一個圓角矩形
	//矩形寬高
	let w = 120;
	let h = 50;
	//開始新路徑
	ctx.beginPath();
	//左上角圓角
	ctx.arc(x+r,y+r,r,Math.PI,Math.PI*3/2);
	//矩形上邊線
	ctx.lineTo(x+w-r, y);
	//右上角圓角
	ctx.arc(x+w-r,y+r,r,Math.PI*3/2,Math.PI*2);
	//矩形右邊線
	ctx.lineTo(x+w, y+h-r);
	//右下角圓角
	ctx.arc(x+w-r,y+h-r,r,0,Math.PI/2);
	//矩形下邊線
	ctx.lineTo(x+r, y+h);
	//左下角圓角
	ctx.arc(x+r,y+h-r,r,Math.PI/2,Math.PI);
	//矩形左邊線
	ctx.lineTo(x, y+r);//最後一條邊線可用 ctx.closePath() 完成繪製
	ctx.clip();
	//繪製第一個圖片
	ctx.drawImage(image, tw/2 - w/2, th/2 - h/2, w, h, x, y, w, h)
	ctx.restore();
	//繪製第二個圖片
	ctx.drawImage(image, 0, 150)
	ctx.restore();
}

繪製本地圖片

//DOM
<img id="source" src="../file/drawImage.png" />
//JS
var image = document.getElementById('source');
image.onload = function(){
	ctx.drawImage(image, 0, 0);
}

繪製網絡圖片

let image = new Image();
image.src = "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3173584241,3533290860&fm=26&gp=0.jpg";
image.onload = function(){
	ctx.drawImage(image, 0, 0);
}

圖像源

drawImage(image, 0, 0) 第一個參數image是繪製到上下文的元素，canvas 圖像源CanvasImageSource可以是以下幾種：

CSSImageValue

HTMLImageElement

SVGImageElement

HTMLVideoElement

HTMLCanvasElement

ImageBitmap

OffscreenCanvas。

new Image()

new Image(w, h)，實例化的時候，可以指定參數，參數爲實例的寬高
可以動態設置canvas寬高

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let image = new Image(100,50);
image.src = "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3173584241,3533290860&fm=26&gp=0.jpg";

image.onload = function(){
	//圖片原始寬高
	console.log(this.naturalWidth, this.naturalHeight);
	//實例化對象new Image(w, h)的指定寬高，如果沒有指定，取默認值(this.naturalWidth, this.naturalHeight)
	console.log(this.width, this.height);
	canvas.width = this.naturalWidth;
	canvas.height = this.naturalHeight;
}

參考資料

CanvasRenderingContext2D.drawImage() - Web API 接口參考 | MDN

感謝閱讀，歡迎評論^-^

Canvas學習記錄之drawImage

最新更新時間：2020年03月16日01:06:23

`《猛戳-查看我的博客地圖-總有你意想不到的驚喜》`

概述

drawImage(image, x, y)

drawImage(image, x, y, width, height)

drawImage(image, x1, y1, w1, h1, x2, y2, w2, h2)

繪製圓形圖像

繪製圓角矩形圖像

繪製本地圖片

繪製網絡圖片

圖像源

new Image()

參考資料

`打賞我吧^-^`

C#開源的兩款功能強大的錄屏神器

認知提升的方法

螞蟻面試：Springcloud核心組件的底層原理，你知道多少？

獲取本地圖片和網絡圖片的尺寸和容量

在釘釘小程序中實現寬高不定的圖片裁剪後等比例縮放中心對齊顯示在固定寬高的canvas容器中並生成臨時url路徑的實例

在釘釘小程序中實現錄音和播放功能實例

在react的移動端項目中實現手機拍攝圖片、壓縮、預覽、裁剪、上傳的實現方案

HTML5高階實例之canvas繪製圓弧

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結