<!DOCTYPE HTML>
<html>
<head>
<title>strokeStyle</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.strokeStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ',0)';
cxt.beginPath();
cxt.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
cxt.stroke();
}
}
}
</script>
</head>
<body onLoad="draw()">
<canvas id="myCanvas" width="150" height="150" style="border:2px solid #06f;"></canvas>
</body>
</html>
显示效果如下：
【与上一个实例类似，不过这次用的是 strokeStyle 属性，而且画的不是方格，而是用 arc 方法来画圆。】