html5 canvas直线画容易的坐标系
日期：2014-05-17 浏览次数：20754 次
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上的坐标，记得算坐标要除以这里的逻辑坐标步长
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
