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;
context.drawImage(bullseye,player.x,player.y);
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">
<head>
<meta charset="UTF-8">
<title>CH5EX12: Moving An Image </title>
<script src="modernizr-1.6.min.js"></script>
