Canvas学习记录之drawImage

小咪咪 2023-07-15 09:00 21阅读 0赞

###### *最新更新时间：2020年03月16日01:06:23* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

#### 概述 ####

> 本文内容：本文介绍基于`drawImage()`绘制图片的一些基本用法，基本图片、固定坐标图片、图片裁剪、图片宽高比压缩、圆角图片、圆形头像图片、在固定区域内水平垂直居中

#### drawImage(image, x, y) ####

>  *  从画布坐标(x,y)开始绘制图片，图片不会被裁剪，宽高比保持不变

*  drawImage(image, 0, 0)

> 从画布原点坐标开始绘制图片，图片不会被裁剪，宽高比保持不变

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70]

*  drawImage(image, 10, 10)

> 从画布坐标(10,10)开始绘制图片，图片不会被裁剪，宽高比保持不变

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 1]

#### 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)，此时图片不会被压缩显示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70]

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

> 图片自身宽高为(200,100)，此时图片在水平方向被压缩显示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 2]

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

> 图片自身宽高为(200,100)，此时图片在垂直方向被压缩显示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 3]

#### 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的空图片

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 4]

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

> 图片自身宽高为(200,100)，从(100,0)裁剪图片，裁剪的宽度image.width为100，但画布为图片开辟的可用宽度为200，此时图片水平方向被拉长一倍，图片绘制出的宽高比发生变化

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 5]

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

> 从画布坐标(10,10)开始绘制图片，图片不会被裁剪，宽高比保持不变

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 6]

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

> 图片自身宽高为(200,100)，画布为图片开辟的可用宽度为100，此时图片在水平方向被压缩显示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 7]

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

> 图片自身宽高为(200,100)，从画布坐标(10,0)开始绘制图片，画布为图片开辟的可用宽度为100，此时图片在水平方向被压缩显示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 8]

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

> 从(10, 10)裁剪图片，从画布坐标(10,10)开始绘制图片，图片被裁剪，宽高比保持不变，

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 9]

#### 绘制圆形图像 ####

*  绘制宽高比1:1的图像，图片宽高(100, 100)

![在这里插入图片描述][20200315231215325.png]

*  绘制宽高比1:1的图像并裁剪为圆形头像，图片宽高(100, 100)，从画布原点坐标开始绘制

![在这里插入图片描述][20200315232037596.png]

*  绘制宽高比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();
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 10]

*  绘制宽高不定的图像并裁剪为圆形头像，圆心和半径不定，在画布上绘制的起始坐标不定，图像在圆中水平垂直居中，裁剪后宽高比保持不变

//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();
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 11]

#### 绘制圆角矩形图像 ####

*  绘制宽高比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();
    }

![在这里插入图片描述][20200315232611167.png]

*  绘制宽高不定的图像并裁剪为圆角矩形，圆角尺寸不定，矩形宽高不定，在画布上绘制的起始坐标不定，图像在矩形中水平垂直居中，裁剪后宽高比保持不变

//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();
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 12]

#### 绘制本地图片 ####

//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][CanvasRenderingContext2D.drawImage_ - Web API _ _ MDN]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70]: /images/20230528/35e1c8d568ea4d4db4fb2b9464575df9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 1]: /images/20230528/e6386b39f2334a299c35aae8885f5e3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 2]: /images/20230528/84d3346d772f4d4c8371755b3b748053.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 3]: /images/20230528/601195c68fc549ff836ce9eaa7b5895c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 4]: /images/20230528/a1d80d1c07bc45a8a76cc40f64114cd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 5]: /images/20230528/4cb92f71a3434fc6b9f0812972ca81ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 6]: /images/20230528/fcbcf7c2b0054e5f97562ec27ec08e99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 7]: /images/20230528/868030697e984d4a8336676dda43b009.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 8]: /images/20230528/63727b8da7e94bd59054d2a46a0dfeaa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 9]: /images/20230528/25bb9a43128048288d9797faadd4cc8c.png
[20200315231215325.png]: /images/20230528/efa0f51561ff46c0bf684cc4f8daaf85.png
[20200315232037596.png]: /images/20230528/c403149c5da5406fb8cc6676db8e1eae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 10]: /images/20230528/3df6868f6c90485f976394c02661a326.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 11]: /images/20230528/3aa0cb5ea0734724a8fa6336f71693c7.png
[20200315232611167.png]: /images/20230528/99b8b61f9574489ea8bc4055b4ed05c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 12]: /images/20230528/ed8083d908824f2789067655c02ac71e.png
[CanvasRenderingContext2D.drawImage_ - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460