44 lines
1.5 KiB
Markdown
44 lines
1.5 KiB
Markdown
---
|
||
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);
|
||
}
|
||
}
|
||
```
|
||
|