Beej's Bit Bucket
a day ago
- HTML5画布通过三种方法实现直接像素操作：createImageData（空像素）、getImageData（从现有画布）和putImageData（设置像素）。
- 像素数组按行主序存储，每个像素由四个整数表示RGBA（红、绿、蓝、透明度），每个值范围从0到255。
- setPixel函数计算数组索引为(x + y * width) * 4，以访问每个像素的四个通道。
- 示例：生成随机彩色像素或基于正弦的颜色渐变，演示了像素操作。
- 当操作现有画布时，使用getImageData获取像素，修改后，再用putImageData写回；值必须限制在0–255之间。
- 文章包括练习内容，如编写getPixel函数、创建渐变以及执行Sobel边缘检测。