用畫布中的形狀對線條進行動畫處理
[英]animating lines with shapes in canvas
問題描述
我將要補充的是，在這個繁星點點的動畫中，我要添加的是，當圓產生一對時，每個圓應彼此之間用一條線連接，並且隨着前進和分開，線將擴大，並且當該點消失時，圓圈移出畫布，任何幫助將不勝感激
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
1 已采納 2018-09-27 16:57:40
你是說這樣的意思嗎？ https://jsfiddle.net/arfeo/b2rkzxy9/
var MAX_DEPTH = 32;
var canvas, ctx;
var stars = new Array(500);
canvas = document.getElementById("tutorial");
if (canvas && canvas.getContext) {
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 = "rgb(0,0,0)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < stars.length - 1; i += 1) {
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;
var nextPx = stars[i + 1].x * k + halfWidth;
var nextPy = stars[i + 1].x * k + halfWidth;
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();
if (px > 0 && px < canvas.width &&
py > 0 && py < canvas.height &&
nextPx > 0 && nextPx < canvas.width &&
nextPy > 0 && nextPy < canvas.height) {
ctx.beginPath();
ctx.moveTo(px, py);
ctx.lineTo(nextPx, nextPy);
ctx.strokeStyle = '#ff0000';
ctx.stroke();
}
}
}
}
在html5畫布中設置自定義形狀的動畫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.