canvas(五) 使用图像
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas(五) 使用图像相关的知识，希望对你有一定的参考价值。
参考技术Acanvas 具有操作图像的能力。可以用于动态的图像合成或者作为图像的背景，以及游戏界面(Sprites)。浏览器支持的任意外部图片格式都可以使用，还可以使用同一个页面中其他canvas元素生成的图片作为图片源。
引入图像到 canvas 里需要以下两部基本操作：
canvas 的API 可以使用下面这些类型中的一种作为图片的源：
HTMLImageElement
这些图片是由 Image() 函数构造出来的，或者任何的 <img> 元素
HTMLVideoElement
用一个html的 <video> 元素作为图片源，可以从视频中抓取当前帧作为一个图像
HTMLCanvasElement
可以使用另一个 <canvas> 元素作为图片源。
ImageBitmap
在 HTMLImageElement 上使用 crossOrigin 属性，可以请求加载其他域名上面的图片。
使用 document.getElementsByIdTagName 或者 document.getElementById 方法来获取其他 canvas 元素。
一旦获得了源图对象，我们就可以使用 drawImage 方法将它渲染到 canvas 里。 drawImage 方法有三种形态，最常见的是：
drawImage(image,x,y)
其中 image 是image 或者 canvas 对象，x/y是目标在 canvas里的起始坐标。
drawImage 的第二种形态，增加了两个用于控制图像在 canvas 中的参数。
drawImage(image,x,y,width,height)
这个方法多了2个参数： width 和 height ,这两个参数用来控制当 canvas 画入时应该缩放的大小。
drawImage 方法的第三个也是最后一个变种有8个新参数，用于控制做切片显示的。
drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)
第一个参数是源图像引入，后面的前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。
在canvas中使用图像
在canvas中导入图像步骤
①确定图像来源
②使用drawImage()方法将图像绘制到canvas中
var img=new Image(); //使用脚本创建一个新的image对象
img.οnlοad=function(){ //使用onload事件一边装载图像，一边执行drawImage函数
//此处放置drawImage的语句
}
img.src="...";
drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
img：规定要使用的图像
sx,sy:可选，开始剪切的坐标位置
swidth，sheight:可选，被剪切图像的宽度和高度
x,y:在画布上放置图像的坐标
width，height：要使用的图像的宽度，高度。
1.定位图像
images/1.jpg（480x300）
drawImage（img,x,y）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="300" height="200" style="border: solid 1px #999;"></canvas>
<script>
draw();
function draw() {
var ctx=document.getElementById('canvas').getContext('2d');
var img=new Image();
img.onload=function () {
ctx.drawImage(img,0,0);
}
img.src='images/1.jpg';
}
</script>
</body>
</html>
2.缩放图像
drawImage(img,x,y,width,height)
function draw() {
var ctx=document.getElementById('canvas').getContext('2d');
var img=new Image();
img.onload=function () {
ctx.drawImage(img,-80,-50,400,250);
}
img.src='images/1.jpg';
}
3.裁剪图像
function draw() {
var ctx=document.getElementById('canvas').getContext('2d');
var img=new Image();
img.onload=function () {
ctx.drawImage(img,20,20,300,200,0,0,480,300);
}
img.src='images/1.jpg';
}
4.平铺图像
图像平铺就是让图像填满画布
①使用drawImage()方法
function draw() {
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var img=new Image();
img.src='images/1.jpg';
img.onload=function () {
var scale=4; //平铺比例
var n1=img.width/scale; //缩小后图像的宽度
var n2=img.height/scale; //缩小后图像的高度
var n3=canvas.width/n1; //平铺横向个数
var n4=canvas.height/n2; //平铺纵向个数
for(var i=0;i<n3;i++)
for(var j=0;j<n4;j++)
ctx.drawImage(img,i*n1,j*n2,n1,n2);
}
}
②使用createPattern(img,type)方法
参数type取值
no-repeat:不平铺
repeat-x:横方向平铺
repeat-y:纵方向平铺
repeat:全方向平铺
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="960" height="600" style="border: solid 1px #999;"></canvas>
<script>
draw();
function draw() {
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var img=new Image();
img.src='images/1.jpg';
img.onload=function () {
var ptn=ctx.createPattern(img,'repeat');//创建填充样式
ctx.fillStyle=ptn; //指定填充样式
ctx.fillRect(0,0,960,600); //填充画布
}
}
</script>
</body>
</html>
以上是关于canvas(五) 使用图像的主要内容，如果未能解决你的问题，请参考以下文章