在畫布html5中添加自定義動畫
[英]adding custom animation in canvas html5
問題描述
這可能有些困難，但是我仍然會問，所以我做了一個星空場，現在我要做的是將我的星星（每對一對）通過一條線彼此連接，現在這條線會隨着星星的前進而擴展當星星移出畫布時消失並消失。在這里，任何幫助將不勝感激。我有邏輯，但是我似乎無法遵循正確的實現方式
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
您可能只是想說一個光速效果！
一種非常便宜的方法是用一些透明的顏色繪制背景。 您還可以使一組點緊密靠近以使效果錯覺。
着色器是實現此目的的好方法，因為它們將使您可以添加光暈和其他一些不錯的圖像技巧，從而使它看起來更好。 這是一個很好的例子： https : //www.shadertoy.com/view/Xdl3D2
在下面，我使用了畫布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>
HTML5畫布/動畫資源
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.