canvasdrawimage，在canvas画布中如何加载图片
其实canvasdrawimage的问题并不复杂，但是又很多的朋友都不太了解在canvas画布中如何加载图片，因此呢，今天小编就来为大家分享canvasdrawimage的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！
drawImage函数绘制图片有哪些方法
drawImage函数绘制图片有三种方法分别为：按原图片的大小进行绘制、按照所指定的大小进行绘制、通用方法一般可用于图片裁剪
今天将介绍canvas中的drawImage函数的用法，具有一定的参考作用，希望对大家有所帮助
【推荐课程：HTML5教程】
drawImage函数是HTML5中的一个新元素canvas标签中的一个方法，它主要是用于画图、合成图象、或做简单的动画等
drawImage()方法有三种形式实现绘图的效果
方法一：
第一种方法就是将整个图像复制到画布，并将其放置到指定点的左上角，并且将每个图像像素映射成画布坐标系统的一个单元。即将按原图片的大小进行绘制
drawImage(image, x, y)例：将图像相对于左上角的位置来画在画布上
<script>
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="images/22.jpg";
img.onload=function(){
cxt.drawImage(img,150,150);
cxt.drawImage(img,250,250);
}
</script>效果图：
方法二：
第二种方法虽然也是将整个图像复制到画布中，但是它允许我们用画布单位来指定想要的图像的宽度和高度。
drawImage(image, x, y, width, height)例：设置图像的尺寸
<script>
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="images/22.jpg";
img.onload=function(){
cxt.drawImage(img,150,150,100,100);
cxt.drawImage(img,250,250,100,100);
}
</script>效果图：
方法三：
第三种方法是完全通用，它允许我们指定图像的任何矩形区域并复制它，以及对画布中的任何位置都可进行任何的缩放
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)例：对图片进行裁剪
<script>
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="images/22.jpg";
img.onload=function(){
cxt.drawImage(img,20,30,50,50,25,25,100,100);
cxt.drawImage(img,115,115,100,100,125,125,200,200);
}
</script>效果图：
在canvas画布中如何加载图片
<script>
var Person= function(canvas){
this.ctx= document.querySelector("canvas").getContext("2d");
this.canvasWidth= this.ctx.canvas.width;
this.canvasHeight= this.ctx.canvas.height;
this.src="image/04.png";
this.init();
}
Person.prototype.init= function(){
var that= this;
this.loadImage(function(image){
//获取图片的宽高
that.imageWidth= image.width;
that.imageHeight= image.height;
//获取单个小怪兽区域的宽高
that.positionWidth= that.imageWidth/ 4;
that.positionHeight= that.imageHeight/ 4;
//默认是从左上角显示的
that.x0= that.canvasWidth/ 2- that.positionWidth/ 2;
that.y0= that.canvasHeight/ 2- that.positionHeight/ 2;
//绘制图片
that.ctx.drawImage(image, 0, 0, that.positionWidth, that.positionHeight, that.x0,
that.y0, that.positionWidth, that.positionHeight);
})
}
Person.prototype.loadImage= function(callback){
var image= new Image();
//图片加载完成后执行
image.onload= function(){
callback&& callback(image);
}
image.src= this.src;
}
var person= new Person();
</script>
三、绘制小人行走的帧动画
<s<script>
var Person= function(canvas){
this.ctx= document.querySelector("canvas").getContext("2d");
this.canvasWidth= this.ctx.canvas.width;
this.canvasHeight= this.ctx.canvas.height;
this.src="image/04.png";
this.init();
}
Person.prototype.init= function(){
var that= this;
this.loadImage(function(image){
//获取图片的宽高
that.imageWidth= image.width;
that.imageHeight= image.height;
//获取单个小怪兽区域的宽高
that.positionWidth= that.imageWidth/ 4;
that.positionHeight= that.imageHeight/ 4;
//默认是从左上角显示的
that.x0= that.canvasWidth/ 2- that.positionWidth/ 2;
that.y0= that.canvasHeight/ 2- that.positionHeight/ 2;
//绘制图片
that.ctx.drawImage(image, 0, 0, that.positionWidth, that.positionHeight, that.x0,
that.y0, that.positionWidth, that.positionHeight);
var index= 0;
setInterval(function(){
that.ctx.clearRect(0, 0, that.canvasWidth, that.canvasHeight);
index++;
that.ctx.drawImage(image, index* that.positionWidth, 0, that.positionWidth, that.positionHeight, that.x0, that.y0,<br> that.positionWidth, that.positionHeight);
if(index>= 3){
index= 0;
}
}, 100);
})
}
Person.prototype.loadImage= function(callback){
var image= new Image();
//图片加载完成后执行
image.onload= function(){
callback&& callback(image);
}
image.src= this.src;
}
var person= new Person();
</script>
四、绘制疾走的小怪兽
可以通过键盘上下左右键控制小人在画布中任意行走
nction(canvas){
this.ctx= document.querySelector("canvas").getContext("2d");
this.canvasWidth= this.ctx.canvas.width;
this.canvasHeight= this.ctx.canvas.height;
this.stepX= 0;
this.stepY= 0;
this.stepSize= 10;
this.index= 0;
this.direction= 0;
this.src="image/04.png";
this.init();
}
Person.prototype.init= function(){
var that= this;
this.loadImage(function(image){
//获取图片的宽高
that.imageWidth= image.width;
that.imageHeight= image.height;
//获取单个小怪兽区域的宽高
that.positionWidth= that.imageWidth/ 4;
that.positionHeight= that.imageHeight/ 4;
//默认是从左上角显示的
that.x0= that.canvasWidth/ 2- that.positionWidth/ 2;
that.y0= that.canvasHeight/ 2- that.positionHeight/ 2;
//绘制图片
that.ctx.drawImage(image, 0, 0, that.positionWidth, that.positionHeight, that.x0,
that.y0, that.positionWidth, that.positionHeight);
var index= 0;
document.onkeydown= function(e){
that.ctx.clearRect(0, 0, that.canvasWidth, that.canvasHeight);
switch(e.keyCode){
case 37:
console.log('左');
that.direction= 1;
that.stepX--;
that.showImage(image);
break;
case 38:
console.log('上');
that.direction= 3;
that.stepY--;
that.showImage(image);
break;
case 39:
console.log('右');
that.direction= 2;
that.stepX++;
that.showImage(image);
break;
case 40:
console.log('下');
that.direction= 0;
that.stepY++;
that.showImage(image);
break;
}
}
})
}
Person.prototype.loadImage= function(callback){
var image= new Image();
//图片加载完成后执行
image.onload= function(){
callback&& callback(image);
}
image.src= this.src;
}
Person.prototype.showImage= function(image){
this.index++;
console.log(this.index);
this.ctx.drawImage(image, this.index* this.positionWidth, this.direction* this.positionHeight, this.positionWidth, this.positionHeight, this.x0+ this.stepX* this.stepSize, this.y0+ this.stepY* this.stepSize, this.positionWidth, this.positionHeight);
if(this.index>= 3){
this.index= 0;
}
}
var person= new Person();
</script>
深圳网站建设www.sz886.com
canvas(五) 使用图像
canvas具有操作图像的能力。可以用于动态的图像合成或者作为图像的背景，以及游戏界面(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个则是定义切片的目标显示位置和大小。
文章分享到这里，希望我们关于canvasdrawimage和在canvas画布中如何加载图片的内容能够给您带来一些新的认识和思考。如果您还有其他问题，欢迎继续探索我们的网站或者与我们交流，我们将尽力为您提供满意的答案。