html5 canvas直线画容易的坐标系 _HTML/CSS

html5 canvas直线画简单的坐标系

看了html5的canvas觉得很好玩，故尝试了下，今天画了一个简单的坐标系，其实就是用横竖的线而已，注意坐标原点是从左上角开始，好了上代码。

? canvas框架部分

<html>
    <head>
  
    </head>
    <body>
        <canvas id="myCanvas" width="1200" height="1200">
        </canvas>
    </body>
</html

?具体的canvas代码

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    //横线与竖线的间隔距离
    var dx = 30;
    var dy = 30;
    //初始坐标点
    var x=0;
    var y=0;
    var w=canvas.width;
    var h=canvas.height;
    //单个步长所表示的长度
    var xy=10;
   //画横线
   while(y<h){
    y=y+dy;
    context.moveTo(x, y);
    context.lineTo(w,y);
    context.stroke();   
    //横坐标的数字
    context.font = "1pt Calibri";
    context.fillText(xy, x, y);
    xy+=10;
   }
   //画竖线
   y=0;
   xy=10;
   while(x<w){
     x=x+dx;
     context.moveTo(x, y);
     context.lineTo(x,h);
     context.stroke(); 
     //纵坐标的数字
     context.font = "1pt Calibri";
     context.fillText(xy,x,10);  
     xy+=10;
   }      
 
 };

?具体的效果自己可以尝试，做这个的目的还有一个是为了清楚的标示出每个元素在canvas上的坐标，记得算坐标要除以这里的逻辑坐标步长