for (x = 0;x < imageData.width; x++) {
//index 为当前要处理的像素编号
var index = y * imageData.width + x;
//一个像素占四个字节，即 p 为当前指针的位置
var p = index * 4;
//改变当前像素 offset 颜色分量的数值，offset 取值为0-3
var color = imageData.data[p + offset] * event.target.value / 50;
// 颜色值限定在[0..255] color = Math.min(255, color);
//将改变后的颜色值存回数组
imageData.data[p + offset]=color
}
}
//输出到屏幕
ctx.putImageData(imageData, 0, 0);
}
</script></p>
提示：您可以先修改部分代码再运行
四、绘制随机颜色的点
这个例子是在画布上随机选择一个点，然后再给他一个随机的颜色值，其实用到的方法和上面的例子大同小异，就是需求不同罢了。
下面是代码和程序实例：
随机颜色的点
复制代码
<canvas id=”test2″ width=”300″ height=”300″ style=” background-color: black”>你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>
<input type=”button” value=”画随机点” onclick=”interval=setInterval(randomPixel,1);” />
<input type=”button” value=”停止” onclick=”clearInterval(interval);”/>
<input type=”button” value=”清除” onclick=”clearCanvas();”/>
<script type=”text/javascript”>
//获取上下文对象
var canvas = document.getElementById(“test2”);
var ctx = canvas.getContext(“2d”);
//画布的宽度和长度
var width = parseInt(canvas.getAttribute(“width”));
var height = parseInt(canvas.getAttribute(“height”));
var imageData = ctx.createImageData(width, height);
function randomPixel(){
var x= parseInt(Math.random()*width);
var y= parseInt(Math.random()*height);
var index = y * width + x;
var p = index * 4;
imageData.data[p + 0] = parseInt(Math.random() * 256);
imageData.data[p + 1] = parseInt(Math.random() * 256);
imageData.data[p + 2] = parseInt(Math.random() * 256);
imageData.data[p + 3] =parseInt(Math.random() * 256);
ctx.putImageData(imageData,0,0);
}
function clearCanvas(){
ctx.clearRect(0,0,width,height);
imageData = ctx.createImageData(width, height);
}
</script>
演示效果: