canvas有比较强的图片操作能力。可以用于动态的图像合成或者作为图形的背景。浏览器支持任意格式如PNG、GIF、或者JPEG,你甚至可以将同一个页面中的其他canvas元素生成的图片作为图片源(toDataURL("image/png"),默认是"image/png")
引用图像到canvas基本的2步
(1)获取或者创建一个图片对象或者另一个canvas的元素的引用作为源,也可以通过提供一个URL的方式来使用图片
(2)使用drawImage()函数将图片绘制到画布上
创建图像
var img = new Image();
img.src = "myImage.png";
drawImage();
当脚本执行后,图片开始装载,若调用drawImage时,图片没有装载完,那什么都不会发生(有些旧的浏览器可能会抛出异常),因此应该用load事件来保证不会在加载完毕之前使用这个图片,上面的代码改成
var img = new Image(); // 创建img元素
img.onload = function(){
// 执行drawImage语句
}
img.src = 'myImage.png'; // 设置图片源地址
除了设置图片源地址还可以使用Base64编码的字符串的格式来定义一个图片
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAA
其优点是图片内容即时可用 ,无需再到服务器兜一圈,缺点是图像没法缓存,图片大的话内嵌的url数据会相当的长
在画布上绘制图片
一旦获得了源图对象,我们就可以使用drawImage方法将它渲染到canvas里。drawImage方法有3种状态,下面是最基础的一种
drawImage(image,x,y) //x和y是其在目标canvas里的起始坐标
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
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();
}
img.src = 'images/backdrop.png';
}
第二种是可以缩放
drawImage(image, x, y, width, height) //增加的width和height是用来控制当向canvas画入时应该缩放的大小
function draw(){
var ctx = document.getElementById("canvas").getContext("2d");
var img = new Image();
img.onload = function(){
for(var i =0;i<4;i++){
for(var j =0;j<5;j++){
ctx.drawImage(img,j*100,i*100,100,100)
}
}
}
img.src = "images/avatar.png"
}
第三种是比较复杂的切片Slicing
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一个参数是跟其他2个是一样的,后面的8个参数参照下图
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(document.getElementById("source"), 80, 80, 240, 240, 22, 21, 240, 240);
ctx.drawImage(document.getElementById("frame"), 0, 0);
}
draw()
最后还有一种比较简单的将图片绘制到canvas的方法 图案样式 Patterns
createPattern(image, type)
该方法接受两个参数。Image 可以是一个 Image 对象的引用,或者另一个 canvas 对象。Type 必须是下面的字符串值之一:repeat,repeat-x,repeat-y 和 no-repeat。
function draw(){
var ctx = document.getElementById("canvas").getContext("2d");
var image = new Image();
image.src = "images/avatar.png";
image.onload = function(){
var pattern = ctx.createPattern(image,"no-repeat");
ctx.fillStyle = pattern;
ctx.fillRect(0,0,600,300)
}
}
draw()