了解 HTMLCanvasElement

最新推荐文章于 2024-07-05 14:54:55 发布

@红@旗下的小兵

最新推荐文章于 2024-07-05 14:54:55 发布

阅读量3.6k

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/qq_42778001/article/details/106522594

版权

H5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTMLCanvasElement：

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

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

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

注意：

这些接口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'