摘要：
varctx=c7.getContext；varp3=newImage（）；p3.src='http://t.zoukankan.com/image/p3.png'；控制台日志；P3.onload=function（）｛varx=0；vary=0；//在画布c7上方侦听鼠标移动事件。onmousemove=function{x=e.offsetX；y=e.offsetY；}//使用计时器，不断清除画布，并重新绘制飞机//小孔：飞机的锚点位于左上角。要更改锚点的距离，请更改重新绘制的x.ysetInterval；｝V。画布画出一个围绕自己旋转的小平面围绕指定点的轴旋转的小型飞机body｛text-align:center；｝canvas｛background:#f0f0；｝您的浏览器不支持画布标签！
一、引言
本文主要是canvas绘图中绘制图像的部分，做了几个练习，综合起来，复习canvas绘图以及定时器的使用。
二、canvas绘制小飞机在指定位置
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>小飞机静止位于上下左右中</title>
<style>
body{
text-align:center;
}
canvas{
background:#f0f0f0;
}
</style>
</head>
<body>
<canvas id="c7" width="500" height="400">
您的浏览器不支持canvas标签！
</canvas>
<script>
var ctx = c7.getContext('2d');
var p2 = new Image();
p2.src = 'image/p2.png';
console.log(p2.width);
p2.onload = function(){
ctx.drawImage(p2,0,0);
ctx.drawImage(p2,500-p2.width,0);
ctx.drawImage(p2,0,400-p2.height);
ctx.drawImage(p2,500-p2.width,400-p2.height);
ctx.drawImage(p2,250-200,200-100,400,200);
}
</script>
</body>
</html>实现效果：
三、canvas绘制小飞机左右自动移动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>左右移动的小飞机</title>
<style>
body{
text-align:center;
}
canvas{
background:#f0f0f0;
}
</style>
</head>
<body>
<canvas id="c7" width="500" height="400">
您的浏览器不支持canvas标签！
</canvas>
<script>
var ctx = c7.getContext('2d');
var p3 = new Image();
p3.src = 'image/p3.png';
console.log(p3.width);
p3.onload = function(){
var x = 0;
var xDirection = 1;
var y = 0;
setInterval(function(){
//清除画布上已有的内容
ctx.clearRect(0,0,500,400);
ctx.drawImage(p3,x,y);
x += 5*xDirection;
if(x>=500-p3.width){
xDirection = -1;
}
if(x<0){
xDirection = 1;
}
},30);
}
</script>
</body>
</html> 
四、canvas绘制随鼠标移动的小飞机
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>随鼠标移动的小飞机</title>
<style>
body{
text-align:center;
}
canvas{
background:#f0f0f0;
}
</style>
</head>
<body>
<canvas id="c7" width="500" height="400">
您的浏览器不支持canvas标签！
</canvas>
<script>
var ctx = c7.getContext('2d');
var p3 = new Image();
p3.src = 'image/p3.png';
console.log(p3.width);
p3.onload = function(){
var x = 0;
var y = 0;
//监听鼠标在画布上方移动事件
c7.onmousemove= function(e){
x = e.offsetX;
y = e.offsetY;
};
//使用定时器，不停的清画布，重绘飞机
//小坑：飞机的定位点是左上角，要改变定位点距离，改变重绘的x.y
setInterval(function(){
ctx.clearRect(0,0,500,400);
ctx.drawImage(p3,x-p3.width/2,y-p3.height/2);
},20);
}
</script>
</body>
</html>
五、canvas绘制以自己为中心旋转的小飞机
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>以指定点为轴中心旋转的小飞机</title>
<style>
body{
text-align:center;
}
canvas{
background:#f0f0f0;
}
</style>
</head>
<body>
<canvas id="c7" width="500" height="400">
您的浏览器不支持canvas标签！
</canvas>
<script>
var ctx = c7.getContext('2d');
var p2 = new Image();
p2.src = 'image/p2.png';
console.log(p2.width);
p2.onload = function(){
var deg1 = 10;
var deg2 = 20;
setInterval(function(){
//绘制飞机1——绕自己为中心旋转
//平移+旋转+绘制+逆向旋转+逆向平移
ctx.translate(100,50);
ctx.rotate(deg1*Math.PI/180);
ctx.drawImage(p2,-100,-50);
ctx.rotate(-deg1*Math.PI/180);
ctx.translate(-100,-50);
deg1 += 10;
//绘制飞机2——不旋转
ctx.drawImage(p2,500-200,0);
//绘制飞机3——绕自己为中心选转，速度是飞机1的2倍
ctx.translate(100,350);
ctx.rotate(deg2*Math.PI/180);
ctx.drawImage(p2,-100,-50);
ctx.rotate(-deg2*Math.PI/180);
ctx.translate(-100,-350);
deg2 += 20;
},50)
}
</script>
</body>
</html>更简单的方法：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>以指定点为轴中心旋转的小飞机</title>
<style>
body{
text-align:center;
}
canvas{
background:#f0f0f0;
}
</style>
</head>
<body>
<canvas id="c7" width="500" height="400">
您的浏览器不支持canvas标签！
</canvas>
<script>
var ctx = c7.getContext('2d');
var p2 = new Image();
p2.src = 'image/p2.png';
console.log(p2.width);
p2.onload = function(){
var deg1 = 10;
var deg2 = 20;
setInterval(function(){
//绘制飞机1——绕自己为中心旋转
//存盘+平移+旋转+绘制+恢复存盘
ctx.save();
ctx.translate(100,50);
ctx.rotate(deg1*Math.PI/180);
ctx.drawImage(p2,-100,-50);
ctx.restore();
deg1 += 10;
//绘制飞机2——不旋转
ctx.drawImage(p2,500-200,0);
//绘制飞机3——绕自己为中心选转，速度是飞机1的2倍
ctx.save();
ctx.translate(100,350);
ctx.rotate(deg2*Math.PI/180);
ctx.drawImage(p2,-100,-50);
ctx.restore();
deg2 += 20;
},50)
}
</script>
</body>
</html>
注：转载请注明出处