HTML5 <canvas> 标签是用于绘制图像，不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器），必须使用脚本（通常是 JS）来完成实际的绘图任务。
<canvas>是有兼容性的，Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。（注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。）
好了，其他不多说了，直接上代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> canvas{ border: 1px solid red; } #block{ display: inline-block; width: 50px; height: 50px; vertical-align: top; border: 1px solid red; } </style> </head> <body> <canvas id="canvas" width="400px" height="400px"></canvas> <span id="block"></span> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); for(var i = 0;i<16;i++){ for(var j =0;j<16;j++){ ctx.fillStyle = "rgb(0,"+(255-i*16)+","+(255-j*16)+")"; ctx.fillRect(i*25,j*25,25,25); } } canvas.onmousemove = function(e){ var e = e || window.event; var x = e.layerX; var y = e.layerY; var imgData = ctx.getImageData(x,y,1,1); var r = imgData.data[0]; var g = imgData.data[1]; var b = imgData.data[2]; block.style.backgroundColor = "rgb("+r+","+g+","+b+")"; } </script> </body> </html>
效果图：
下一篇还会继续说canvas实现时钟功能。