在画布html5中添加自定义动画
[英]adding custom animation in canvas html5
问题描述
this might be somewhat difficult but i wil still ask, so i made a starfield ,now what i want to do is to have my stars( a pair each) connected to eachother by a line ,now this line will expand as the stars move forward and disappear when the stars move out of the canvas .any help would be appreciated here this is difficult i have the logic but i seem unable to follow the correct way to implement it 
这可能有些困难，但是我仍然会问，所以我做了一个星空场，现在我要做的是将我的星星（每对一对）通过一条线彼此连接，现在这条线会随着星星的前进而扩展当星星移出画布时消失并消失。在这里，任何帮助将不胜感激。我有逻辑，但是我似乎无法遵循正确的实现方式
function randomRange(minVal, maxVal) { return Math.floor(Math.random() * (maxVal - minVal - 1)) + minVal; } function initStars() { for (var i = 0; i < stars.length; i++) { stars[i] = { x: randomRange(-25, 25), y: randomRange(-25, 25), z: randomRange(1, MAX_DEPTH) } } } function degToRad(deg) { radians = (deg * Math.PI / 180) - Math.PI / 2; return radians; } function animate() { var halfWidth = canvas.width / 2; var halfHeight = canvas.height / 2; ctx.fillStyle = "rgb(0,0,0)"; ctx.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < stars.length; i++) { stars[i].z -= 0.2; if (stars[i].z <= 0) { stars[i].x = randomRange(-25, 25); stars[i].y = randomRange(-25, 25); stars[i].z = MAX_DEPTH; } var k = 128.0 / stars[i].z; var px = stars[i].x * k + halfWidth; var py = stars[i].y * k + halfHeight; if (px >= 0 && px <= 1500 && py >= 0 && py <= 1500) { var size = (1 - stars[i].z / 32.0) * 5; var shade = parseInt((1 - stars[i].z / 32.0) * 750); ctx.fillStyle = "rgb(" + shade + "," + shade + "," + shade + ")"; ctx.beginPath(); ctx.arc(px, py, size, degToRad(0), degToRad(360)); ctx.fill(); } } } function animate() { var halfWidth = canvas.width / 2; var halfHeight = canvas.height / 2; ctx.fillStyle = "rgb(0,0,0)"; ctx.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < stars.length; i++) { stars[i].z -= 0.2; if (stars[i].z <= 0) { stars[i].x = randomRange(-25, 25); stars[i].y = randomRange(-25, 25); stars[i].z = MAX_DEPTH; } var k = 128.0 / stars[i].z; var px = stars[i].x * k + halfWidth; var py = stars[i].y * k + halfHeight; if (px >= 0 && px <= 1500 && py >= 0 && py <= 1500) { var size = (1 - stars[i].z / 32.0) * 5; var shade = parseInt((1 - stars[i].z / 32.0) * 750); ctx.fillStyle = "rgb(" + shade + "," + shade + "," + shade + ")"; ctx.beginPath(); ctx.arc(px, py, size, degToRad(0), degToRad(360)); ctx.fill(); } } }
<!DOCTYPE html5> <html> <head> <title>stars</title> <script src="convergis.js"></script> <script> MAX_DEPTH = 32; var canvas, ctx; var stars = new Array(500); window.onload = function() { canvas = document.getElementById("tutorial"); if( canvas && canvas.getContext ) { ctx = canvas.getContext("2d"); initStars(); setInterval(animate,17); } } </script> </head> <body> <canvas id='tutorial' width='1500' height='1500'> </canvas> </body> </html>
1 个解决方案
解决方案1
2 已采纳 2018-09-25 17:27:26
You could just say you want a lightspeed effect! 您可能只是想说一个光速效果！
One way very cheap way to do it is to paint the background with some transparency. 一种非常便宜的方法是用一些透明的颜色绘制背景。 You can also render a set of points close together in order to make the illusion of the effect. 您还可以使一组点紧密靠近以使效果错觉。
The good way to do it is shaders since they will allow you to add glow and some other nice image trickery that will make it look better. 着色器是实现此目的的好方法，因为它们将使您可以添加光晕和其他一些不错的图像技巧，从而使它看起来更好。 Here is a good example: https://www.shadertoy.com/view/Xdl3D2 这是一个很好的例子： https : //www.shadertoy.com/view/Xdl3D2
Below I used the canvas api lineTo and even with a fixed line width, it's a pretty good final result. 在下面，我使用了画布api lineTo ，即使线宽固定，这也是一个很好的最终结果。
var MAX_DEPTH = 64; var LINELENGTH = 0.1; var stars = new Array(500); var canvas = document.getElementById("tutorial"); canvas.width = innerWidth; canvas.height = innerHeight; var ctx = canvas.getContext("2d"); initStars(); setInterval(animate,17); function randomRange(minVal, maxVal) { return Math.floor(Math.random() * (maxVal - minVal - 1)) + minVal; } function initStars() { for (var i = 0; i < stars.length; i++) { stars[i] = { x: randomRange(-25, 25), y: randomRange(-25, 25), z: randomRange(1, MAX_DEPTH) } } } function degToRad(deg) { radians = (deg * Math.PI / 180) - Math.PI / 2; return radians; } function animate() { var halfWidth = canvas.width / 2; var halfHeight = canvas.height / 2; ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < stars.length; i++) { stars[i].z -= 0.5; if (stars[i].z <= 0) { stars[i].x = randomRange(-25, 25); stars[i].y = randomRange(-25, 25); stars[i].z = MAX_DEPTH; } var k = 254.0 / stars[i].z; var px = stars[i].x * k + halfWidth; var py = stars[i].y * k + halfHeight; if (px >= 0 && px <= 1500 && py >= 0 && py <= 1500) { var size = (1 - stars[i].z / 32.0) * 2; var shade = parseInt((1 - stars[i].z / 32.0) * 750); ctx.strokeStyle = "rgb(" + shade + "," + shade + "," + shade + ")"; ctx.lineWidth = size; ctx.beginPath(); ctx.moveTo(px,py); var ox = size * (px - halfWidth) * LINELENGTH; var oy = size * (py - halfHeight) * LINELENGTH; ctx.lineTo(px + ox, py + oy); ctx.stroke(); } } }
<canvas id='tutorial' width='1500' height='1500'></canvas>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.