JS新手，有没有办法把这些圆圈变成钻石？

Question

正如标题所暗示的那样，我正在尝试将这个闪烁的圆形区域变为矩形或菱形，无论哪个更容易。

链接：http://jsfiddle.net/Jksb5/1/

HTML

<canvas id="pixie"></canvas>

JS

var WIDTH;
var HEIGHT;
var canvas;
var con;
var g;
var pxs = new Array();
var rint = 60;

    $(document).ready(function(){
        WIDTH = 960;
        HEIGHT = 300;
        canvas = document.getElementById('pixie');
        $(canvas).attr('width', WIDTH).attr('height',HEIGHT);
        con = canvas.getContext('2d');
        for(var i = 0; i < 100; i++) {
            pxs[i] = new Circle();
            pxs[i].reset();
        }
        setInterval(draw,rint);

    });

    function draw() {
        con.clearRect(0,0,WIDTH,HEIGHT);
        for(var i = 0; i < pxs.length; i++) {
            pxs[i].fade();
            pxs[i].move();
            pxs[i].draw();
        }
    }

    function Circle() {
        this.s = {ttl:8000, xmax:5, ymax:2, rmax:25, rt:1, xdef:90, ydef:90, xdrift:4, ydrift: 4, random:true, blink:true};

        this.reset = function() {
            this.x = (this.s.random ? WIDTH*Math.random() : this.s.xdef);
            this.y = (this.s.random ? HEIGHT*Math.random() : this.s.ydef);
            this.r = ((this.s.rmax-1)*Math.random()) + 1;
            this.dx = (Math.random()*this.s.xmax) * (Math.random() < .5 ? -1 : 1);
            this.dy = (Math.random()*this.s.ymax) * (Math.random() < .5 ? -1 : 1);
            this.hl = (this.s.ttl/rint)*(this.r/this.s.rmax);
            this.rt = Math.random()*this.hl;
            this.s.rt = Math.random()+1;
            this.stop = Math.random()*.2+.4;
            this.s.xdrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
            this.s.ydrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
        }

        this.fade = function() {
            this.rt += this.s.rt;
        }

        this.draw = function() {
            if(this.s.blink && (this.rt <= 0 || this.rt >= this.hl)) this.s.rt = this.s.rt*-1;
            else if(this.rt >= this.hl) this.reset();
            var newo = 1-(this.rt/this.hl);

            con.beginPath();
            con.arc(this.x,this.y,this.r,0,Math.PI*2,true);
            // con.rect(188, 50, 100, 100);

            con.closePath();

            var cr = this.r*newo;
            g = con.createRadialGradient(this.x,this.y,0,this.x,this.y,(cr <= 0 ? 1 : cr));
            g.addColorStop(0.0, 'rgba(237,23,31,'+newo+')');
            // g.addColorStop(this.stop, 'rgba(237,146,157,'+(newo*.6)+')');
            g.addColorStop(1.0, 'rgba(126,22,40,0)');
            con.fillStyle = g;
            con.fill();
        }

        this.move = function() {
            this.x += (this.rt/this.hl)*this.dx;
            this.y += (this.rt/this.hl)*this.dy;
            if(this.x > WIDTH || this.x < 0) this.dx *= -1;
            if(this.y > HEIGHT || this.y < 0) this.dy *= -1;
        }

        this.getX = function() { return this.x; }
        this.getY = function() { return this.y; }
    }

我尝试过的一件事是将 con.arc 变量更改为一个矩形，认为这可能是生成圆的原因，但是当我评论该特定行时，它会使该字段变为小矩形，而不是对象。

所以我猜测需要修改的是 this 函数，我真的无法弄清楚/理解。任何帮助将不胜感激，谢谢！

Answer 1

您可以将arc 调用替换为

        con.moveTo(this.x, this.y-this.r/2);
        con.lineTo(this.x+this.r/2, this.y);
        con.lineTo(this.x, this.y+this.r/2);
        con.lineTo(this.x-this.r/2, this.y);

渐变填充当然会保持圆形

Answer 2

con 是 CanvasRenderingContext2D，这是您在画布上绘制时使用的。

首先，使用

创建路径

con.beginPath();
con.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
con.closePath();

不过，这实际上并没有在画布上绘制任何东西。在填充路径之前不会绘制任何内容：con.fill()。

con.fill() 之前的行所做的是创建一个渐变对象并将其设置为fillStyle，因此在调用con.fill 时将其绘制在圆圈内。

g = con.createRadialGradient(this.x, this.y, 0, this.x, this.y, (cr <= 0 ? 1 : cr));
g.addColorStop(0.0, 'rgba(237,23,31,' + newo + ')');
g.addColorStop(1.0, 'rgba(126,22,40,0)');
con.fillStyle = g;

如果您删除这些行，con.rect 将起作用。您可以用这样的正方形替换圆圈：

con.beginPath();
con.rect(this.x, this.y, this.r, this.r);
con.closePath();
con.fill();

它不那么漂亮，但它是一个开始。