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);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|