Fatal编程技术网
  • javascript/
  • Javascript 逐像素跟踪六边形的边缘

Javascript 逐像素跟踪六边形的边缘

javascript animation html5-canvas

Javascript 逐像素跟踪六边形的边缘,javascript,animation,html5-canvas,trigonometry,hexagonal-tiles,Javascript,Animation,Html5 Canvas,Trigonometry,Hexagonal Tiles,要使用HTML5画布在Javascript中创建动画，我首先需要能够描述围绕六边形的逐点路径。我已经有了每个顶点的x/y坐标。我不知道我将沿着边缘行进的方向，所以任何解决方案都应该能够在任一方向上工作 六边形的半径，因此每边为20像素。我需要为每条边生成一组20个点，映射路径中每个像素的x和y位置。这对于直线来说显然很容易，其中每个像素每一步增加1，而另一个轴保持静止。对于有角度的边，我无法获得绘制点所需的三角学 我相当肯定这是微不足道的，但我会感激一些帮助我清楚的想法。 < P>你可以考虑BR

要使用HTML5画布在Javascript中创建动画，我首先需要能够描述围绕六边形的逐点路径。我已经有了每个顶点的x/y坐标。我不知道我将沿着边缘行进的方向，所以任何解决方案都应该能够在任一方向上工作

六边形的半径，因此每边为20像素。我需要为每条边生成一组20个点，映射路径中每个像素的x和y位置。这对于直线来说显然很容易，其中每个像素每一步增加1，而另一个轴保持静止。对于有角度的边，我无法获得绘制点所需的三角学

我相当肯定这是微不足道的，但我会感激一些帮助我清楚的想法。

< P>你可以考虑BRESHAMAMS线算法。这是一个标准的goto，易于实现

功能绘图线（p1、p2）{
var dx=p2.x-p1.x；
变量dy=p2.y-p2.y；
var-err=0.0；
var derr=数学绝对值（dy/dx）；
变量y=p1.y；
对于（var x=p1.x；x=0.5）{
y++；
误差=误差-1.0；
}
}
}
尽管这可能是一种不好的方法，因为它不会消除锯齿。这些是实现别名的线条绘制算法（Google it…），或者最好是使用内置线条绘制api的画布，只覆盖越来越长的连续线条

此代码将从点x1/y1到点x2/y2绘制等距点

也可反向工作（x2/y2至x1/y1）

既然每个顶点都有x/y坐标，就可以开始了

下面是代码和小提琴：


正文{背景色：象牙；}
画布{边框：1px纯红；}
p{字体大小：24px；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
DrawDottedLine（300400,7,7,20，“绿色”）；
函数DrawDottedLine（x1、y1、x2、y2、点半径、点计数、点颜色）{
var dx=x2-x1；
var dy=y2-y1；
var spaceX=dx/（点计数-1）；
var spaceY=dy/（点计数-1）；
var newX=x1；
var newY=y1；

对于（var i=0；我可能会更幸运地在数学网站上查询公式：）是的，同意，你永远不知道，有人可能会为了一些简单的重复而想出一些javascript魔术。让我们看看你尝试过的……六边形是规则的吗？

function plotLine(p1, p2){
    var dx = p2.x - p1.x;
    var dy = p2.y - p2.y;
    var err = 0.0;
    var derr = Math.abs( dy / dx ); 

    var y = p1.y;
    for(var x = p1.x; x < p2.x; x++){
        drawPoint(new Point(x,y));
        err = err + derr;
        if(err >= 0.5 ) {
           y++;
           err = err - 1.0;
        }
    }
}



    <!doctype html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

    <style>
        body{ background-color: ivory; }
        canvas{border:1px solid red;}
        p{font-size:24px;}
    </style>

    <script>
        $(function(){

            var canvas=document.getElementById("canvas");
            var ctx=canvas.getContext("2d");

            DrawDottedLine(300,400,7,7,7,20,"green");

            function DrawDottedLine(x1,y1,x2,y2,dotRadius,dotCount,dotColor){
              var dx=x2-x1;
              var dy=y2-y1;
              var spaceX=dx/(dotCount-1);
              var spaceY=dy/(dotCount-1);
              var newX=x1;
              var newY=y1;
              for (var i=0;i<dotCount;i++){
                      drawDot(newX,newY,dotRadius,dotColor);
                      newX+=spaceX;
                      newY+=spaceY;              
               }
               drawDot(x1,y1,3,"red");
               drawDot(x2,y2,3,"red");
            }
            function drawDot(x,y,dotRadius,dotColor){
                ctx.beginPath();
                ctx.arc(x,y, dotRadius, 0, 2 * Math.PI, false);
                ctx.fillStyle = dotColor;
                ctx.fill();              
            }           

        }); // end $(function(){});
    </script>

    </head>

    <body>

    <canvas id="canvas" width=307 height=407></canvas>

    </body>
    </html>