嘗試對畫布中的形狀進行動畫處理，它會顯示，但不會移動
[英]Trying to animate shapes in canvas, it shows up, but doesn't move
問題描述
我正在嘗試對在畫布中使用lineTo制作的多邊形進行動畫處理。 它會顯示，但不會移動。 我嘗試遵循對象方法，但是似乎什么也沒做。
救命？
<!doctype html>
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
<script>
"use strict";
var canvas;
var ctx;
var timer;
var shapes;
var x;
var y;
function degreesToRadians(degrees) {
return (degrees*Math.PI)/180;
}
//to rotate stuff, not currently in use
function rotateStuff() {
roTimer = setInterval(ctx.rotate(degreesToRadians(60)),100);
}
//constructor for Shape object, not currently in use
function Shape() {
//this.x = canvas.width/2 + Math.random()*10-5;
//this.y = canvas.height/2 + Math.random()*10-5;
this.r = Math.random()*20-5;
this.vx = Math.random()*10-5;
this.vy = Math.random()*10-5;
var colors = ['red','green','orange','purple','blue','aqua','pink','gold'];
this.color = colors[Math.floor(Math.random()*colors.length)];
}
//pushes the shapes to an array, not currently in use
function makeShapes() {
shapes = [];
for (var i = 0; i<2; i++){
shapes.push(new Shape());
}
}
//fills and resets background
function fillBackground() {
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0,0,0,0.3)';
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.globalCompositeOperation = 'lighter';
}
//draws the shape
function drawShapes(r, p, m) {
//canvas, x position, y position, radius, number of points, fraction of radius for inset
fillBackground();
x = 350;
y = 350;
r = Math.random()*20-5;
//for (var i = 0; i < shapes.length; i++) {
//var s = shapes[i];
ctx.save();
ctx.beginPath();
ctx.translate(x, y);
ctx.moveTo(0,0-r);
//}
for (var i2 = 0; i2 < p; i2++) {
ctx.rotate(Math.PI / p);
ctx.lineTo(0, 0 - (r*m));
ctx.rotate(Math.PI / p);
ctx.lineTo(0, 0 - r);
}
ctx.fillStyle = "yellow";
ctx.fill();
var vx = Math.random()*10-5;
var vy = Math.random()*10-5;
x += vx;
y += vy;
r -=8
ctx.restore();
}
//}
window.onload = function() {
canvas = document.getElementById('animCanvas');
ctx = canvas.getContext('2d');
//makeShapes();
//console.log(shapes);
timer = setInterval(drawShapes(40, 5, 0.5), 100);
//timer2 = setInterval(makeShapes, 4500);
}
</script>
</head>
<body>
<canvas width='700' height='700' id='animCanvas'></canvas>
</body>
</html>
1 個解決方案
解決方案1
1 已采納 2016-04-23 20:34:35
編碼提示：將您的代碼分成不同的職責。 這種分離使您可以將編碼重點放在更簡單的任務上。 並且一旦該任務正確運行，您就可以移至另一個任務，而不必擔心先前的任務已損壞。
這是您的“旋轉星星”項目的任務
1. Draw a star and
2. Rotate that star using animation.*
...及其描述
drawShapes()繪制一個星形在指定的[x,y]的指定位置currentAngle
animate()運行一個動畫循環，該循環：
Clears the canvas.
Fills the background.
Draws the star (or many stars) with `drawShapes`.
Changes the `currentAngle` rotation for the next loop.
Requests another animation loop.
關於旋轉
旋轉形狀是一個簡單的兩步過程：
1. Move to the shape's centerpoint: `.translate(centerX,centerY)'
2. Rotate the canvas to the currently desired angle: `rotate(currentAngle)`
由於translate和rotate不會自動撤消，因此在轉換后必須“清理”。 一個簡單的方法是執行此操作： context.setTransform(1,0,0,1,0,0) 。 這會將內部轉換矩陣設置為其默認狀態（==完全未轉換）。
因此，您的輪換流程變為：
1. Move to the shape's centerpoint: `.translate(centerX,centerY)'
2. Rotate the canvas to the currently desired angle: `.rotate(currentAngle)`
3. Reset the canvas: `.setTransform(1,0,0,1,0,0)`
這是帶注釋的代碼和演示：
var canvas; var ctx; canvas = document.getElementById('animCanvas'); ctx = canvas.getContext('2d'); var cw=canvas.width; var ch=canvas.height; var shapes=[]; var star1={ x:50, y:100, r:40, currentAngle:0, p:5, m:.5, fill:'yellow',angleChange:Math.PI/60} var star2={ x:150, y:100, r:25, currentAngle:0, p:55, m:5, fill:'blue',angleChange:-Math.PI/360} var star3={ x:250, y:100, r:25, currentAngle:0, p:15, m:3, fill:'red',angleChange:Math.PI/120} requestAnimationFrame(animate); function drawShapes(star) { ctx.save(); // translate to the star's centerpoint ctx.translate(star.x,star.y); // rotate to the current angle ctx.rotate(star.currentAngle) // draw the star ctx.beginPath(); ctx.moveTo(0,0-star.r); for (var i2 = 0; i2 < star.p; i2++) { ctx.rotate(Math.PI / star.p); ctx.lineTo(0, 0 - (star.r*star.m)); ctx.rotate(Math.PI / star.p); ctx.lineTo(0, 0 - star.r); } ctx.fillStyle =star.fill; ctx.fill(); ctx.restore(); } function fillBackground() { ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = 'rgba(0,0,0,0.3)'; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.globalCompositeOperation = 'lighter'; } function animate(time){ // clear the canvas ctx.clearRect(0,0,cw,ch); // fill the background fillBackground(); // draw the stars // If you put star1,star2,star3 in a stars[] array then // you could simply the following demo code by looping // through the array // // draw the star1 drawShapes(star1); // increase star1's current rotation angle star1.currentAngle+=star1.angleChange; // draw the star2 drawShapes(star2); // increase star2's current rotation angle star2.currentAngle+=star2.angleChange; // draw the star3 drawShapes(star3); // increase star3's current rotation angle star3.currentAngle+=star2.angleChange; // request another animation loop requestAnimationFrame(animate); }
<canvas width='700' height='700' id='animCanvas'></canvas> </body>
我正在嘗試編寫一個播放器 object 執行簡單的任務，即使用 WASD 在 canvas 上移動但不移動
[英]I'm trying to write a player object that performs the simple task of moving on the canvas with WASD but doesn't move
試圖通過單擊按鈕獲取JavaScript來對畫布元素進行動畫處理。 但是畫布會先顯示自己，然后消失。
[英]Trying to get javascript to animate a canvas element on the click of a button. But the canvas shows itself for a second and then disappears.
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.