html5画坐标

soft_xiaohui

<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>