canvas详解09-像素操作

简介: canvas详解09-像素操作

到目前为止,我们尚未深入了解 Canvas 画布真实像素的原理,事实上,你可以直接通过 ImageData 对象操纵像素数据,直接读取或将数据数组写入该对象中。稍后我们也将深入了解如何控制图像使其平滑(反锯齿)以及如何从 Canvas 画布中保存图像。

#ImageData 对象

ImageData对象中存储着 canvas 对象真实的像素数据,它包含以下几个只读属性:

width

图片宽度,单位是像素

height

图片高度,单位是像素

data

Uint8ClampedArray 类型的一维数组,包含着 RGBA 格式的整型数据,范围在 0 至 255 之间(包括 255)。

data 属性返回一个 Uint8ClampedArray,它可以被使用作为查看初始像素数据。每个像素用 4 个 1bytes 值 (按照红,绿,蓝和透明值的顺序; 这就是"RGBA"格式) 来代表。每个颜色值部份用 0 至 255 来代表。每个部份被分配到一个在数组内连续的索引,左上角像素的红色部份在数组的索引 0 位置。像素从左到右

目录
相关文章
|
4月前
|
前端开发
canvas图片操作
canvas图片操作
|
5月前
|
前端开发
|
3月前
|
前端开发
可以擦除Canvas的矩形的绘制
可以擦除Canvas的矩形的绘制
|
3月前
|
前端开发
已知数组 [{ x, y, radius }, ...], 在canvas中绘制出对应图形
已知数组 [{ x, y, radius }, ...], 在canvas中绘制出对应图形
|
4月前
|
移动开发 前端开发 HTML5
HTML5 Canvas中实现绘制一个像素宽的细线
HTML5 Canvas中实现绘制一个像素宽的细线
51 3
|
3月前
|
前端开发
|
3月前
|
Web App开发 前端开发
canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式
canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式
212 0
|
3月前
|
存储 前端开发 JavaScript
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
156 0
|
3月前
|
机器学习/深度学习 前端开发 算法
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
34 0
|
4月前
|
前端开发
canvas图形操作(缩放、旋转、位移)
canvas图形操作(缩放、旋转、位移)