Canvas 获取颜色值

Canvas 是 HTML5 的画布元素，按照像素绘制图像。有时需要用户点击鼠标的时候获取像素值。

获取画布元素

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");

在获取指定坐标的像素值

假设坐标为 mouseX 和 mouseY，则

var c = ctx.getImageData(mouseX, mouseY, 1, 1).data;
var red = c[0];
var green = c[1];
var blue = c[2];

即可。

c是一个长度为4的数组，分别是代表r、g、b、a。