<!DOCTYPE HTML>
<html>
<head>
<title>yanse</title>
<script type="text/javascript">
function draw(){
var cxt = document.getElementById("myCanvas").getContext("2d");
for (i=0; i<6; i++)
{
for (j=0; j<6; j++)
{
cxt.fillStyle='rgb('+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+',0)';
cxt.fillRect(j*25,i*25,25,25);
}
}
}
</script>
<body onLoad="draw()">
<canvas id="myCanvas" width="150" height="150" style="border:2px solid #06f;"></canvas>
</body>
</html>
显示效果如下：
【给绘制的图形上色，需要借助两个重要的属性 fillStyle 和 strokeStyle 。fillStyle = color strokeStyle = color 。其中 fillStyle 用于设置填充颜色，strokeStyle 用于设置图形轮廓的颜色。实例中用两层 for循环来绘制方格阵列，每个方格不同的颜色。如上图。使用两个变量 i 和 j 来为每一个方格产生唯一的 RGB 色彩值，其中仅修改红色和绿色通道的值，而保持蓝色通道的值不变。可以通过修改这些颜色通道的值来产生各种各样的色板。】