---
title: Canvas图片
date: 2021-04-30
author: ac
tags:
 - Canvas
categories:
 - 可视化
---

## Canvas 加载图片

 用于动态的图像合成或者作为图形的背景，以及游戏界面等
 操作图片的步骤：

1. 获得需要绘制的图片，图片源的类型：
   - HTMLImageElement对象，由Image()方法创建，或任何的\<img>元素
   - HTMLVideoElement对象，用一个HTML的\<video>元素作为你的图片源，可以从视频中抓取当前帧作为一个图像
   - HTMLCanvasElement对象，可以使用另一个 \<canvas> 元素作为你的图片源。
   - ImageBitmap对象，这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。

2. 使用drawImage()方法将图片绘制到画布上
   - drawImage(image,x,y)：x,y为图像在canvas里的起始坐标
   - drawImage(image, x, y, width, height)：width和height用来控制图片在canvas中缩放的大小
   - drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)



```javascript
window.onload = init;
function init(){
    var ctx = document.getElementById("canvas").getContext("2d");
    var img = new Image();
    img.src = "./images/bg.jpg";
    //使用 data:url的方式嵌入图片
    // img.src = "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";
    img.onload = function(){
        //执行drawImage
        ctx.drawImage(img,0,0,600,450);
    }
}
```