更改画布中动画的形状

Question

i already have the code set but enter code here i want to change the rectangles to circles, but as I change the rect() to arc() the code does not work . 我已经设置了代码，但是在这里输入代码，我想将矩形更改为圆形，但是当我将rect（）更改为arc（）时，代码将不起作用。 i added the method c.arc(this.x, this.y,10,0,2*Math.PI) and then the stroke () method but then the result output disappears . 我添加了方法c.arc（this.x，this.y，10,0,2 * Math.PI），然后添加了stroke（）方法，但是结果输出消失了。 if you could change the shape and customize the code that would be really helpful 如果您可以更改形状并自定义代码，那将非常有帮助

 <!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

First: you don't need a canvas element in the HTML since the canvas is created dynamicaly in the JS. 首先：HTML中不需要画布元素，因为画布是在JS中动态创建的。

Second: you added the method arc but maybe you forgot to add c.fill(); 第二：您添加了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}

I hope this helps. 我希望这有帮助。

更改画布中动画的形状

问题描述

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