绘制图片
最后更新于:2022-04-02 03:28:51
[TOC]
## 绘制图片
```
drawImage(img,0,0); //基本
drawImage(image, x, y, width, height) // 缩放图片 width,height
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) // 切片
```
切片
![](https://www.runoob.com/wp-content/uploads/2018/12/2106688680-54566fa3d81dc_articlex.jpeg)
### 实例
```
var draw=()=>{
let canvas = document.querySelector("#tutorial");
if(!canvas.getContext)return;
/** * @type CanvasRenderingContext2D */
let ctx = canvas.getContext("2d");
var img = new Image()
img.onload=()=>{
ctx.drawImage(img,0,0,)
}
img.src="https://images.pexels.com/photos/8369289/pexels-photo-8369289.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
}
```
';