zoukankan      html  css  js  c++  java
  • 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)}
    }

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

    晚安了,亲们!

  • 相关阅读:
    svn cleanup failed–previous operation has not finished 解决方法
    开源SNS社区系统推荐
    从网络获取图片本地保存
    MS SQL Server 数据库连接字符串
    KeepAlive
    Configure Git in debian
    sqlserver query time
    RPi Text to Speech (Speech Synthesis)
    SQL Joins with C# LINQ
    search or reseed identity columns in sqlserver 2008
  • 原文地址:https://www.cnblogs.com/jristy/p/4072466.html
Copyright © 2011-2022 走看看