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變種是一個矩形認爲這可能是基因對圓圈進行評級，但是當我評論該特定行時，它會將該字段變成一個小矩形，而不是對象。

所以我猜想需要修改的是這個函數，我真的不知道/理解。任何幫助將不勝感激，謝謝！

Answer 1

您可以

 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); 

更換arc通話過程中的漸變填充將保持輪

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(); 

它不是很漂亮，但它是一個開始。