canvas drawImage()有什么用？

爱被打了一巴掌 2023-07-14 05:56 11阅读 0赞

**canvas有三种用法**

*  **三参数**

context.drawImage(img,x,y)

img: 要使用的图像、画布、视频  
x：在画布上放置图像的x坐标  
y：在画布上放置图像的y坐标

**例子**  
HTML:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <img id="picture" src="./cloud.png" alt="test" />
        <canvas id="canvas" style="border:1px solid #aaa; display:block; margin:50px">
        </canvas>
    
        <script> window.onload = function() { var canvas = document.getElementById("canvas"); canvas.width = 400; canvas.height = 400; var context = canvas.getContext("2d") var pic = document.getElementById("picture") context.drawImage(pic,0,0) //context.drawImage(pic,20,0) 下图展示 //context.drawImage(pic,100,0) 下图展示 } </script>
    </body>
    </html>

参数中的x，y只会控制图像在canvas中开始画的位置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70 2]

*  **五参数** 可以进行图片缩放

context.drawImage(img,x,y,width,height);

img: 要使用的图像、画布、视频  
x：在画布上放置图像的x坐标  
y：在画布上放置图像的y坐标  
**width：在canvas里画出的图像的宽（可以理解为缩放  
height：在canvas里画出的图像的高（可以理解为缩放**

*可以实现一些缩放的需求*

在代码中这样写

context.drawImage(pic,0,0,100,100)//会使图像缩成一个100*100

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

*  **九参数** 可以进行图片**裁剪+缩放**

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

> **！！！这个方法用一句话总结就是：先裁剪再缩放！**  
> 在一个图上（sx，sy）位置开始，裁剪出一个宽为swidth，高为sheight的图，然后按照width\*height的尺寸进行缩放，在canvas的（x，y）位置开始画出来

img: 要使用的图像、画布、视频  
**sx：在原图上开始裁剪的x坐标位置  
sy：在原图上开始裁剪的y坐标位置  
swidth：要从原图上裁出的宽度  
sheight：要从原图上裁出的高度**  
x：在画布上放置图像的x坐标  
y：在画布上放置图像的y坐标  
width：在canvas里画出的图像的宽（可以理解为缩放  
height：在canvas里画出的图像的高（可以理解为缩放

在代码中这样写

context.drawImage(pic,0,0,172,314,0,0,86,157)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70 4]  
可以看出图像是在原图的（0，0）位置裁剪出172*314的图，然后将这个裁剪好的图画在canvas的（0，0）位置，缩放成86*157的尺寸

也就是 **先裁剪再缩放**！

代码这样写，也就是按照172\*314进行裁剪，按照原尺寸画出来（没有缩放）

context.drawImage(pic,0,0,172,314,0,0,172,314)

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70]: /images/20230529/924ac4ffeb2b43878b0bc0f6d78d2d25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70 1]: /images/20230529/bcbf4dec0c0148f59d8abd7222da9889.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70 2]: /images/20230529/2c7e998f913c4fd48a8c13a92cc36cc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70 3]: /images/20230529/1bdc8f1a83e04681a2fde0f5f285fe19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70 4]: /images/20230529/3e50c84a0cbd44e3b92c2de3f5398731.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70 5]: /images/20230529/9f013a8080944ea4b82494e7115b4151.png