<script type="text/javascript">

//draw rect on canvas (support IE9,chrome,firefox)

//绘制一个矩形。并使用fillStyle来填充，默认为黑色

function canvasOperator() {

var myCanvas = document.getElementById('myCanvas');

var myCanvasFillText = myCanvas.getContext('2d');

myCanvasFillText.fillRect(50, 25, 150, 100);// draw rect on canvas?

?

//alert default fillStyle si red

var myCanvas1 = document.getElementById('myCanvas1');

var myCanvasFillText1 = myCanvas1.getContext('2d');

myCanvasFillText1.fillStyle = 'red';

myCanvasFillText1.fillRect(50, 25, 150, 100);// draw rect on canvas?

?

//myCanvas1.width=myCanvas1.width;

?

var myCanvas2 = document.getElementById('myCanvas2');

var myCanvasFillText2 = myCanvas2.getContext('2d');

myCanvasFillText2.fillStyle = 'red';

for(var x=0.5 ;x<500;x+=10){

myCanvasFillText2.moveTo(x,0);

myCanvasFillText2.lineTo(x,400)

}

for(var y=0.5;y<400;y+=10){

myCanvasFillText2.moveTo(0,y);

myCanvasFillText2.lineTo(500,y);

}

?

myCanvasFillText2.strokeStyle = '#eee';

myCanvasFillText2.stroke();

//同一路径下上的所有的线条和曲线都会是相同的颜色

myCanvasFillText2.beginPath();//start a new path

myCanvasFillText2.moveTo(0,40);

myCanvasFillText2.lineTo(175,40);

myCanvasFillText2.moveTo(180,40);

myCanvasFillText2.lineTo(495,40);

myCanvasFillText2.moveTo(495,35);

myCanvasFillText2.lineTo(500,40);

myCanvasFillText2.lineTo(495,45);

myCanvasFillText2.moveTo(40,0);

myCanvasFillText2.lineTo(40,175);

myCanvasFillText2.moveTo(40,180);

myCanvasFillText2.lineTo(40,395);

myCanvasFillText2.moveTo(35,395);

myCanvasFillText2.lineTo(40,400);

myCanvasFillText2.lineTo(45,395);

myCanvasFillText2.strokeStyle='#000';

myCanvasFillText2.strok