一、canvas图像
canvas更有意思的一项特性就是图像操作能力。用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如PNG、GIF或者JPEG。 甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。
引入图像到canvas里需要以下两步基本操作：
- 获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源
也可以通过提供一个URL的方式来使用图片- 使用drawImage()函数将图片绘制到画布上
二、绘制图片
drawImage 方法有三种形态。
(1)把一幅图像放置到画布上, 使用以下方法:
drawImage(image,x,y)
image 是 image 或者 canvas 对象，x 和 y 是 canvas 里的起始坐标。
示例1：
image.png
<body>
<img id="demo" src="../img/a5.png" alt="demo" width="300" height="200">
<canvas id="cava1" width="300" height="200"></canvas>
</body>
<script>
function draw() {
var canvas=document.getElementById("cava1");
var ctx=canvas.getContext("2d");
//把一幅图像放置到画布上
var img=document.getElementById("demo");
img.onload = function() {
ctx.drawImage(img,10,10);
}
}
draw();
（2）缩放 Scaling
drawImage 方法的第二种形态是增加了两个用于控制图像在 canvas 中缩放的参数。
drawImage(image, x, y, width, height)
这个方法多了2个参数：width 和 height，这两个参数用来控制 当向canvas画入时应该缩放的大小
注意：图像可能会因为大幅度的缩放而变得起杂点或者模糊。
如果图像里面有文字，那么最好不要进行缩放，因为那样处理之后很可能图像里的文字就会变得无法辨认了。
示例2：
image.png
<body>
<canvas id="cava1" width="300" height="150"></canvas>
</body>
<script>
function draw() {
var canvas=document.getElementById("cava1");
var ctx=canvas.getContext("2d");
//图片缩放
var img = new Image();
img.onload = function(){
for (var i=0;i<4;i++){
for (var j=0;j<3;j++){
ctx.drawImage(img,j*60,i*50,60,50);
}
}
};
img.src = '../img/a9.jpg';
}
draw();
</script>
（3）切片 Slicing
drawImage 方法的第三个也是最后一个变种有8个新参数，用于控制做切片显示的。
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。
前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。
image.png
示例3：
image.png
<body>
<p>Image to use:</p>
<img id="demo" src="../img/a5.png" alt="demo" width="300" height="200">
<p>Canvas:</p>
<canvas id="cava1" width="300" height="200"></canvas>
</body>
<script>
function draw() {
var canvas=document.getElementById("cava1");
var ctx=canvas.getContext("2d");
//切片
var img = document.getElementById("demo");
img.onload = function () {
ctx.drawImage(img, 33, 71, 104, 124, 21, 20, 87, 104);
}
}
draw();
</script>
其它文章请访问：
