html5画坐标

<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.stroke();

//draw text 

//font

//textAlign

//textBaseLine

myCanvasFillText2.font='bold 12px sans-serif';

myCanvasFillText2.fillText('x',177,43);

myCanvasFillText2.fillText('y',37,177);

//textBaseLine

myCanvasFillText2.textBaseline='top';

myCanvasFillText2.fillText('(0,0)',5,5);

//textAlign

   myCanvasFillText2.textAlign='right';

myCanvasFillText2.fillText('(500,400)',495,390);

myCanvasFillText2.fillRect(0,0,3,3);

myCanvasFillText2.fillRect(497,397,3,3);

 

}

</script>