HTML5边玩边学（3）像素和颜色

<p><input onclick=”interval=setInterval(randomPixel,1);” value=”画随机点” type=”button”> <input onclick=”clearInterval(interval);” value=”停止” type=”button”> <input onclick=”clearCanvas();” value=”清除” type=”button”>
<script type=”text/javascript”>
//获取上下文对象
var canvas2 = document.getElementById(“test2”);
var ctx2 = canvas2.getContext(“2d”);
//画布的宽度和长度
var width2 = parseInt(canvas2.getAttribute(“width”));
var height2 = parseInt(canvas2.getAttribute(“height”));

var imageData2 = ctx2.createImageData(width2, height2);
function randomPixel(){
var x= parseInt(Math.random()*width2);
var y= parseInt(Math.random()*height2);
var index = y * imageData2.width + x;
var p = index * 4;
imageData2.data[p + 0] = parseInt(Math.random() * 256);
imageData2.data[p + 1] = parseInt(Math.random() * 256);
imageData2.data[p + 2] = parseInt(Math.random() * 256);
imageData2.data[p + 3] =parseInt(Math.random() * 256);
ctx2.putImageData(imageData2,0,0);
}
function clearCanvas(){
ctx2.clearRect(0,0,width2,height2);
imageData2 = ctx2.createImageData(width2, height2);
}
</script></p>

提示：您可以先修改部分代码再运行