当前位置: 首页 > Web前端 > HTML5

HTML5Canvas绘图详解drawImage()方法

时间:2023-04-05 11:15:36 HTML5

简介是一种新的HTML元素,可以被Script语言(通常是JavaScript)用来绘制图形。例如,您可以使用它来绘制图片、合成图像或制作简单(和不太简单)的动画。1.在画布上绘制最常见的方式是使用Image对象。支持的源图片格式取决于浏览器的支持,但是一些典型的图片格式(png、jpg、gif等)基本可以。2.以下所有示例中,图片源均使用这张200×200尺寸的图片。3.绘制图片:在最基本的绘制操作中,您只需要知道图像出现的位置(x和y坐标)即可。图像的位置是相对于它的左上角来判断的。使用此方法,图像将以其原始大小简单地绘制在画布上。4、代码如下:varmyImage=document.getElementByIdx_x("myCanvas");varcxt=myImage.getContext("2d");varimg=newImage();img.src="200.jpg";cxt.drawImage(img,50,50);5.图像变形:要改变图像的大小,需要使用重载的drawImage函数,并为其提供所需的宽高参数。6、代码如下:varmyImage=document.getElementByIdx_x("myCanvas");varcxt=myImage.getContext("2d");varimg=newImage();img.src="200.jpg";cxt.drawImage(img,50,50,100,100);7、图片裁剪:drawImage方法的作用是对图片进行裁剪。drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight)8.参数很多,但基本上你可以认为是从原图上取一个矩形区域画在画布上目标区域。9、代码如下:varmyImage=document.getElementByIdx_x("myCanvas");varcxt=myImage.getContext("2d");varimg=newImage();img.src="200.jpg";cxt.drawImage(img,0,0,50,50,25,25,100,100);cxt.drawImage(img,125,125,100,100,125,125,150,150);10、以上是HTML5中画布(canvas)标签中绘制和处理图片的基本操作。