了解 HTMLCanvasElement

朴灿烈づ我的快乐病毒、 2023-02-14 15:34 4阅读 0赞

### **HTMLCanvasElement：** ###

是所有  <canvas> 元素的代称（可以理解为是<canvas>标签的爹O(∩\_∩)O哈哈~）。

**类似的还有：**HTMLDivElement -> 对应<div> 标签、HTMLImageElement -> 对应<img> 标签、HTMLParagraphElement 对应 <p>标签，几乎所有的标准HTML元素都对应有接口名称，然后全部都继承于：HTMLElement，完整的继承关系，下图：

![20200603135310623.jpg][]

下边这张图，原型链继承关系很明显：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70][]

***注意：***

***这些接口IE9+浏览器支持（话说IE浏览器还存在吗！）***

### 属性 ###

**1、HTMLCanvasElement.height**

表示<canvas>画布绘制区域的高度，标准属性值为正整数，单位是像素。如果高度值不合法，例如负数，则会使用默认的150代替。为什么是150而不是其他高度值呢？这个是CSS规范中定义的，作为替换元素，默认的尺寸是300\*150，<canvas>元素就是替换元素，，因此默认高度是150。由于<svg>元素也是替换元素，因此，<svg>默认的尺寸也是300\*150。

**2、HTMLCanvasElement.width**

表示<canvas>画布绘制区域的宽度，标准属性值为正整数，单位是像素，规则同上。

### \*\* 方法 \*\* ###

**1、HTMLCanvasElement.getContext( )**

**专业定义：**获取<canvas>相关的可绘制的上下文，这个 "上下文" 的意思是相当于一个装画笔、颜料的工具箱，其中包含了许多的API，相当于工具箱中的各种画笔（铅笔、炭笔、马克笔、刷子、擦笔等等），有了这个才能在canvas画布上绘制各种图形。

对于canvas而言，我们借助上下文可以绘制何种图形和效果

// ctx 就是上下文
    let canvas = document.getElementById('canvas')
    let ctx = canvas.getContext('2d')

**2、HTMLCanvasElement.toDataURL ( mimeType, definition )**

此方法，可以将<canvas> 画布转换成base64格式的图片数据，我们可以通过参数设定图片的类型及清晰度。

**参数说明：**

mimeType - ** **表示图像需要转换成什么样的类型，默认是image/png，还可以是image/jpeg 或者 image/webp。

defination  -  表示转换的图片质量，范围是0~1.此参数如果想有效，图片的mimeType需要为 image/jpeg 或者image/webp，其他mimeType值无效。默认的他所质量为 0.92。

**返回值：**

base64 data图片数据

***注意：***

***（1）如果mimeType 参数值不是 image/jpeg 或者 image/webp 中的一个，最后一定都会当做image/png来处理！！！***

***（2）toDataURL( ) 处理数据是同步的，所以它没有回调函数。***

**3、HTMLCanvasElement.toBlob( callback，mimeType，definition ) **

可以将<canvas> 画布转换为Blog对象（是一个二进制对象）， 此方法，可以把Canvas图像缓存在磁盘上，或者存储在内存中，这个是由浏览器决定的。

**参数说明：**

callback -  toBlob方法执行成功后的回调方法，支持一个参数，表示当前转换的Blob对象。

mimeType -  同上。

definition  -   同上。

如：

使用toBlob上传图片：

let canvas = document.getElementById('canvas')
    canvas.toBlob((blob) => {
        let formData = new FromData()
        formData.append('image', blob)
        // 把 formData 发送给后端即可
    })

## ##

### 总结 ###

**\*\* 同步异步的问题 \*\* **

toBlob( ) 方法是异步的，而toDataURL（）方法是同步的，如果需要转化的canvas尺寸很大，则会阻塞脚本运行，因此，主要控制Canvas的尺寸。

一个图片，如果src 是 base64地址，则渲染速度几乎是毫秒级的，但是，虽然是毫秒级的，它依然是异步的， <img> 元素赋予如果要获取base64地址的对应图片的相关信息的话，需要在回调函数中获取：

let img = new Image()
    img.onload = () => {
        // 在这里获取的img.width的宽度就是实际生成的图片的宽度
        // dragImage绘制图片等操作可以在这里完成
    }
    // 在这里获取的img.width 为0
    img.src = 'data:iamge/png;base64,iVBO0RewKGgoA'

[20200603135310623.jpg]: https://img-blog.csdnimg.cn/20200603135310623.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020060313565339.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx,size_16,color_FFFFFF,t_70