HTML5简单的坐标网格知识

用html5我想对于坐标和网格应该不会陌生,那么接下来我简单的写下我的理解。

坐标:在HTML5的Canvas中是这样的定义的:

画的不咋的,很好理解吧。仔细看看不就是一些线和点呗,定义了一些数字而已,我们要做的不就是获取这些个数字。

既然知道了坐标,那么我们可以做很多的事了。这里是简单的介绍下,在html中点的话,肯定是浏览器规定了,我们只需要自己去调用而已,那么我们怎么知道呢?

那么就需要网格了。但是我们每次都要去画网格才知道坐标不是很麻烦。所以自己可以估计下画个草图呀。不用每次都去画了。有了设计图,那么我们调用就是html5中的

moveTo()和lineTo()了。这两个方法自己去看,很简单。

接下来看看网格:

网格:也就是些横线和竖线而已。怎么来的?还不是moveTo和lineTo的应用画出来的。代码如下:

//竖线
for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
context.beginPath();
context.moveTo(i, 0);
context.lineTo(i, context.canvas.height);
context.stroke();
}

//横线
for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
context.beginPath();
context.moveTo(0, i);
context.lineTo(context.canvas.width, i);
context.stroke();
}

一看就明白了。

竖线既然叫竖,那么相对坐标而言,不就是说随着横轴变化,那么也就是x变化,那么y呢?肯定是0和canvas的高了。

横线也是一样了,随着竖轴变化,也就是y变化,x就是0和canvas的宽了。

那么上面的stepx和stepy分别就是绘制网格时候的步数了,也就是竖线与竖线,横线与横线之间的距离。

为什么加0.5呢?那就是像素边界与线段的知识了,说白了也就是0-1之间我们放在0.5上,像素宽为1像素我们正好可以填充。

我们怎么获取坐标呢?

网上方法很多,其实都一样。用了Canvas. getBoundingClientRect()来获取Canvas对象相对屏幕的相对位置:该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height;这里的top、left和css中的理解很相似,width、height是元素自身的宽高,但是  right,bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离。

那么我们说width和height是元素自身宽高什么概念呀?

就拿ie来说:

IE只返回top,lef,right,bottom四个值,不够可以通过以下方法来获取width,height的值:

    var ro = object.getBoundingClientRect();
    var Width = ro.right - ro.left;
    var Height = ro.bottom - ro.top;

这就是元素自身宽高了。

那么在Canvas中的表示就是:

function windowToCanvas(canvas, x, y) {
var bbox = canvas.getBoundingClinetRect();//获取Canvas对象相对屏幕的相对位置
return {x:x-bbox.left*(canvas.width/bbox.width),
y:bbox.top*(canvas.height/bbox.hight)}
}

很常见的获取坐标。为什么这么取,看你了。如何用当然是通过监听和触发了,网上看看好了,没有具体代码了。

 

晚安了,亲们!

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。