HTMLCanvasElement //canvas elem对象
属性
height//高
width//宽
方法
getContext()//获取<canvas>相关的可绘制的上下文
toBlob()//(ie 不支持)此方法可以将<canvas>画布转换为base64格式的图片数据,我们可以通过设定参数指定转换的图片类型,甚至图片的清晰度
toDataURL()//可以将<canvas>画布转换为Blob对象
CanvasRenderingContext2D//等于 canvas.getContext('2d')对象;
绘制矩形
绘制文本
文本样式
填充和描边
渐变相关
图案相关
canvas.createPattern()//创建图案。图案内容可以是图片,可以是<canvas>元素,也可以是渐变。此方法返回CanvasPattern对象。
阴影相关
绘制路径
线条样式
位置检测
变换
透明度和层级
图片与像素
canvas.drawImage()//图片绘制在画布上。
//drawImage 优化: 离屏绘制:
/* 上一节提到,绘制同样的一块区域,如果数据源是尺寸相仿的一张图片,那么性能会比较好,
而如果数据源是一张大图上的一部分,性能就会比较差,因为每一次绘制还包含了裁剪工作。也许,
我们可以先把待绘制的区域裁剪好,保存起来,这样每次绘制时就能轻松很多。
drawImage 方法的第一个参数不仅可以接收 Image 对象,也可以接收另一个 Canvas 对象。
而且,使用 Canvas 对象绘制的开销与使用 Image 对象的开销几乎完全一致。
我们只需要实现将对象绘制在一个未插入页面的 Canvas 中,然后每一帧使用这个 Canvas 来绘制
*/
canvas.createImageData()//创建一个新的空白的ImageData对象。
canvas.getImageData()//获取Canvas画布的设定区域的ImageData对象。
canvas.putImageData()//给定的ImageData对象应用在Canvas画布上。
Canvas状态
其他方法
其他一些不常用的API方法。
CanvasGradient
方法
addColorStop()//给渐变增加新的渐变点
ImageBitmap
属性
height//只读。是无符号长整数,表示ImageBitmap对象的CSS像素高度
width//只读。是无符号长整数,表示ImageBitmap对象的CSS像素宽度
方法
close()//处置所有与ImageBitmap关联的图形资源
ImageData
属性
data//只读。是一个包含RGBA像素信息的Uint8ClampedArray,数组中所有的值都是整数,范围是0~255
height//只读。是无符号长整数,表示ImageData对应的实际像素高度
width//只读。是无符号长整数,表示ImageData对应的实际像素宽度
TextMetrics
属性
width//只读。表示当前文本占据的CSS像素宽度
CanvasImageSource
无暴露属性,无继承方法。
CanvasPattern
无暴露属性,无继承方法。
RenderingContext
无暴露属性,无继承方法。
以上就是小编整理的全部相关内容,希望能够帮助到你。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。