Witam,
rozpocząłem swoją przygodę z html5 i próbuję napisać skrypt który będzie poruszał obiekt w kwadracie (funkcja moving) wraz z obrotem wokół własnej osi(funkcja loop).Obie te funkcje robią robote ,ale nijak nie mogę zastosować ich równocześnie.Translate w połaczeniu z rotate sprawia ,że obiekt porusza się ruchem kulisty w jaki sposób mogłbym to odseparować i wywołać te akcje na jednym obiekcie równocześnie?
<body onload="drawCanvas();"> <canvas id="myCanvas" width="900" height="900">
<p>Your browser doesn't support canvas.
</p> </canvas>
<script type="text/javascript"> var surface;
var happy;
var angle = 30;
var x = 200;
var y = 200;
var dx = 4;
var dy = 1;
var WIDTH = 900;
var HEIGHT = 900;
function drawCanvas() {
// Get our Canvas element
surface = document.getElementById("myCanvas");
if (surface.getContext) {
// If Canvas is supported, load the image
happy = new Image();
happy.onload = loadingComplete;
happy.src = "rotate/images/el1small.png";
}
}
function loadingComplete(e) {
// When the image has loaded begin the loop
setInterval(loop, 25);
// setInterval(moving, 25);
}
function moving(){
var surfaceContext = surface.getContext('2d');
surfaceContext.fillStyle = "rgb(255,255,255)";
surfaceContext.fillRect(0, 0, surface.width, surface.height);
// Save the current context
surfaceContext.save();
surfaceContext.translate(happy.width * 0.5, happy.height * 0.5)
surfaceContext.drawImage(happy, x, y);
// And restore the context ready for the next loop
surfaceContext.restore();
if (x + dx > WIDTH || x + dx < 0)
dx = -dx;
if (y + dy > HEIGHT || y + dy < 0)
dy = -dy;
x += dx;
y += dy;
}
function loop() {
// Each loop we rotate the image
// Grab the context
var surfaceContext = surface.getContext('2d');
// Clear the canvas to White
surfaceContext.fillStyle = "rgb(255,255,255)";
surfaceContext.fillRect(0, 0, surface.width, surface.height);
// Save the current context
surfaceContext.save();
// Translate to the center point of our image
surfaceContext.translate(happy.width * 0.5, happy.height * 0.5);
// Perform the rotation
surfaceContext.rotate(DegToRad(angle));
// Translate back to the top left of our image
surfaceContext.translate(-happy.width * 0.5, -happy.height * 0.5);
// Finally we draw the image
surfaceContext.drawImage(happy, 0, 0);
// And restore the context ready for the next loop
surfaceContext.restore();
// Increment our rotation angle
angle++;
}
function DegToRad(d) {
// Converts degrees to radians
return d * 0.0174532925199432957;
}
Z góry dzięki za pomoc
Ten post edytował omxd 2.04.2013, 18:54:30
html5 moving i rotate równocześnie na jednym obiekcie.
omxd html5 moving i rotate równocześnie na jednym obiekcie. 2.04.2013, 16:46:45 
