在canvas中绘制图片，首先需要创建一个图片对象
var canvas = document.getElementById("c1");
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = "imgs/pic02.jpg";
此时，需要注意的是绘制图片的过程是异步执行
因此，要想绘制出来图片，需要在加载完成之后才能绘制
img.onload = function () {
//等待img加载完成以后执行
ctx.drawImage(img,0,0,100,100);
}
总结一下最近所学的canvas的api
1、矩形 ctx.strokeRect() ctx.fillRect() ctx.clearRect()清除画布
2、文本 ctx.storkeText() ctx.fillText() ctx.measureText(txt) -->obj.width
3、路劲 描边 填充 裁减 渐变
ctx.beginPath() ctx.closePath()
ctx.moveTo() ctx.lineTo() ctx.arc()
ctx.stroke() ctx.fill ctx.clip()
创建一个渐变对象；添加渐变的颜色
4、图像 ctx.drawImage
绘图上下文的状态改变 和 变形
ctx.rotate(deg);//画笔旋转 deg-->角度
ctx.translate(x,y);//变化坐标原点的变化 --- 平移
ctx.scale(x,y);//画笔 缩放
ctx.save();//保存绘图上下文 当前的变形数据
....
ctx.restore();//恢复最近一次保存的画笔的变形状态
下面我们来绘制出在画布不停旋转的图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
text-align: center;
}
canvas{
background-color: #eee;
}
</style>
</head>
<body>
<h3>Canvas绘制图像--旋转的飞机</h3>
<canvas id="c1">
您的浏览器不支持canvas标签
</canvas>
<script>
var canvas = document.getElementById("c1");
var w = 600,h = 400;
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = "imgs/hero1.png";
img.onload = function () {
var deg = 0;
setInterval(function () {
ctx.clearRect(0,0,w,h);
deg += 5 ;
// 左上角的小飞机
// 保存画笔的当前变形的状态
ctx.save();
// 原点做平移
ctx.translate(img.width/2,img.height/2)
// 旋转画笔
ctx.rotate(deg * Math.PI/180);
ctx.drawImage(img,-(img.width/2),-(img.height/2));
// 逆向旋转
// ctx.rotate(-deg * Math.PI/180);
// 恢复原点
// ctx.translate(-(img.width/2),-(img.height/2));
// 恢复到上一次的保存变形状态
ctx.restore();
// 左下角的飞机
// 保存画笔的当前变形的状态
ctx.save();
ctx.translate(img.width/2,h - img.height/2)
// 旋转画笔
ctx.rotate(deg * Math.PI/180);
ctx.drawImage(img,-(img.width/2),-(img.height/2));
// 逆向旋转
// ctx.rotate(-deg * Math.PI/180);
// 恢复原点
// ctx.translate(-(img.width/2),-(h - img.height/2));
// 恢复到上一次的保存变形状态
ctx.restore();
} , 41)
}
</script>
</body>
</html>