html5 canvas笔记
参考文章：https://developer.mozilla.org/en/Canvas_tutorial/Using_images
canvas最灵活的特征之一是可以使用图片，图片格式可以是png、jpg或gif，同一个页面上的其他canvas元素也可以当做图片源。
导入图片
在canvas画布上绘制图片之前我们需要提前获取需要绘制的图片对象，可以通过以下的几种方式来获得我们需要的图片对象。推荐使用script预加载来载入所需图片。
使用同一页面上的图片
我们可以通过document.images或者document.getElementsByTagName、document.getElementById方法来获取当前页面上的任意图片。
使用同一页面上的其他canvas元素
同样，使用document.getElementsByTagName、document.getElementById方法可以获取到页面上的canvas元素，它们也可以作为图片源被重新绘制。
一个比较实际的用途是通过第二个canvas元素来显示第一个canvas元素中的某些细节。
通过script载入图片
可以使用预加载的方式通过script载入图片，这很常见。
1 2 3 4 5 | var img = new Image(); // 创建图片对象
img.onload = function(){
// 在这里绘制图片
};
img.src = 'myImage.png'; // 设置目标图片的路径 |
通过data:url嵌入图片
data:url允许你通过一个base64位编码的字符串来直接定义一个图片。这里有关于data:url更详细的介绍。
在canvas上绘制图片
基本用法
当我们能够获得所需图片的引用时，可以使用drawImage方法将其渲染到canvas画布上。基本的使用方法是：
- drawImage(image, x, y)
通过这种方法我们可以把图片定位到canvas画布的(x,y)坐标点上。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = 'images/backdrop.png';
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
} |
缩放
第二种方法附加了两个新的参数使我们可以很方便地对图片进行缩放。
- drawImage(image, x, y, width, height)
同前一种使用方法一样，将图片渲染到canvas画布的(x,y)坐标点，width和height是设定缩放过后的图片大小，不需要单位，以像素度量。
1 2 3 4 5 6 7 8 9 10 11 12 | function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = 'images/rhino.jpg';
img.onload = function(){
for (i=0;i<4;i++){
for (j=0;j<3;j++){
ctx.drawImage(img,j*50,i*38,50,38);
}
}
}
} |
裁剪
最后一种方法是裁剪，它最复杂，同时功能也最强大。使用方法是：
- drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
通过一张示意图我们可以很容易地理解它的工作方式：
1 2 3 4 5 | function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.drawImage(document.getElementById('source'),33,71,104,124,21,20,87,104);
ctx.drawImage(document.getElementById('frame'),0,0);
} |
最后推荐一个预加载图片序列的函数。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | function loadImage(srcList,callback){
var imgs={};
var totalCount=srcList.length;
var loadedCount=0;
for (var i=0;i<totalCount;i++){
var img=srcList[i];
var image=imgs[img.id]=new Image();
image.src=img.url;
image.onload=function(event){
loadedCount++;
}
}
if (typeof callback=="function"){
var Me=this;
function check(){
if (loadedCount>=totalCount){
callback.apply(Me,arguments);
}else{
setTimeout(check,100);
}
}
check();
}
return imgs;
} |
