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上的坐标，记得算坐标要除以这里的逻辑坐标步长