HTML and CSS Reference
In-Depth Information
var p0 = {x:60, y:10};
var p1 = {x:70, y:200};
var p2 = {x:125, y:295};
var p3 = {x:350, y:350};
var ball = {x:0, y:0, speed:.01, t:0};
var points = new Array();
theCanvas = document.getElementById("canvasOne");
context = theCanvas.getContext("2d");
setInterval(drawScreen, 33);
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
Moving an Image
Moving an image on a cubic Bezier curve path is just as easy as moving a circular drawing
object, as we'll demonstrate in the next two examples. Suppose you are making a game
where bullseyes move across the canvas and the player must shoot at them. You could
use cubic Bezier curve paths to create new and interesting patterns for the bullseyes to
move along.
For this example, we first create a global variable named bullseye , which we will use
to hold the bullseye.png image that we will load to display on the canvas:
var bullseye;
function eventWindowLoaded() {
bullseye = new Image();
bullseye.src = "bullseye.png"
bullseye.onload = eventAssetsLoaded;
}
In canvasApp() , we will create a different path for the curve from the one in the first
example by setting new values for p0 , p1 , p2 , and p3 . Using these values, the bullseye
will move on a parabola-like path ( Figure 5-15 shows the path of the curve):
var p0 = {x:60, y:10};
var p1 = {x:150, y:350};
var p2 = {x:300, y:375};
var p3 = {x:400, y:20};
Search WWH ::




Custom Search