更改畫布中動畫的形狀

Question

我已經設置了代碼，但是在這里輸入代碼，我想將矩形更改為圓形，但是當我將rect（）更改為arc（）時，代碼將不起作用。 我添加了方法c.arc（this.x，this.y，10,0,2 * Math.PI），然后添加了stroke（）方法，但是結果輸出消失了。 如果您可以更改形狀並自定義代碼，那將非常有幫助

 <!DOCTYPE html5> <html> <head> <title>GLOOMY</title> <script> window.onload = function() { // create the canvas var canvas = document.createElement("canvas"), c = canvas.getContext("2d"); var particles = {}; var particleIndex = 0; var particleNum = 15; // set canvas size canvas.width = window.innerWidth; canvas.height = window.innerHeight; // add canvas to body document.body.appendChild(canvas); // style the canvas c.fillStyle = "black"; c.fillRect(0, 0, canvas.width, canvas.height); function Particle() { this.x = canvas.width / 2; this.y = canvas.height / 2; this.vx = Math.random() * 10 - 5; this.vy = Math.random() * 10 - 5; this.gravity = 0.3; particleIndex++; particles[particleIndex] = this; this.id = particleIndex; this.life = 0; this.maxLife = Math.random() * 30 + 60; this.color = "hsla(" + parseInt(Math.random() * 360, 10) + ",90%,60%,0.5"; } Particle.prototype.draw = function() { this.x += this.vx; this.y += this.vy; if (Math.random() < 0.1) { this.vx = Math.random() * 10 - 5; this.vy = Math.random() * 10 - 5; } this.life++; if (this.life >= this.maxLife) { delete particles[this.id]; } c.fillStyle = this.color; c.fillRect(this.x, this.y, 5, 10); }; setInterval(function() { //normal setting before drawing over canvas w/ black background c.globalCompositeOperation = "source-over"; c.fillStyle = "rgba(0,0,0,0.5)"; c.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < particleNum; i++) { new Particle(); } // c.globalCompositeOperation = "darken"; for (var i in particles) { particles[i].draw(); } }, 30); }; </script> </head> <body> <canvas> </canvas> </body> </html>

Answer 1

首先：HTML中不需要畫布元素，因為畫布是在JS中動態創建的。

第二：您添加了arc方法，但也許您忘記添加c.fill（）;。

  window.onload = function() { // create the canvas var canvas = document.createElement("canvas"), c = canvas.getContext("2d"); var particles = {}; var particleIndex = 0; var particleNum = 15; // set canvas size canvas.width = window.innerWidth; canvas.height = window.innerHeight; // add canvas to body document.body.appendChild(canvas); // style the canvas c.fillStyle = "black"; c.fillRect(0, 0, canvas.width, canvas.height); function Particle() { this.x = canvas.width / 2; this.y = canvas.height / 2; this.vx = Math.random() * 10 - 5; this.vy = Math.random() * 10 - 5; this.gravity = 0.3; particleIndex++; particles[particleIndex] = this; this.id = particleIndex; this.life = 0; this.maxLife = Math.random() * 30 + 60; this.color = "hsla(" + parseInt(Math.random() * 360, 10) + ",90%,60%,0.5"; } Particle.prototype.draw = function() { this.x += this.vx; this.y += this.vy; if (Math.random() < 0.1) { this.vx = Math.random() * 10 - 5; this.vy = Math.random() * 10 - 5; } this.life++; if (this.life >= this.maxLife) { delete particles[this.id]; } c.fillStyle = this.color; //c.fillRect(this.x, this.y, 5, 10); c.beginPath(); c.arc(this.x,this.y,2.5,0,2*Math.PI); c.fill(); }; setInterval(function() { //normal setting before drawing over canvas w/ black background c.globalCompositeOperation = "source-over"; c.fillStyle = "rgba(0,0,0,0.5)"; c.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < particleNum; i++) { new Particle(); } // c.globalCompositeOperation = "darken"; for (var i in particles) { particles[i].draw(); } }, 30); };

 body{margin:0; padding:0}

我希望這有幫助。

更改畫布中動畫的形狀

問題描述

1 個解決方案

解決方案1
1 已采納 2018-09-20 09:35:32

更改畫布中動畫的形狀

問題描述

1 個解決方案

解決方案1 1 已采納 2018-09-20 09:35:32

解決方案1
1 已采納 2018-09-20 09:35:32