HTML and CSS Reference
In-Depth Information
We also need to create a player object that represents the bullseye on the canvas:
var player = {x:0, y:0, speed:.01, t:0};
In drawImage() , after we calculate t , xt , and yt , we draw the image on the canvas:
player.x = xt-bullseye.width/2;
player.y = yt-bullseye.height/2;
Figure 5-15. Moving an image on a cubic Bezier curve path
The rest of Example 5-12 works just like Example 5-11 .
Example 5-12. Moving an image
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>CH5EX12: Moving An Image </title>
<script src="modernizr-1.6.min.js"></script>
Search WWH ::

Custom Search