H5之DrawImage使用

H5学习Canvas中的图片绘制：

api：

1、Canvas中定位图像：

/**
 * img  所要绘制的图像元素
 * x    该元素绘制的起点x坐标 （即img左上角x坐标）
 * y      该元素绘制的起点y坐标 （即img左上角y坐标）
 */
context.drawImage(img,x,y);

举例：

	var drawImag = function(){
			var mCanvas = document.getElementById("canvas");
			var mCtx = mCanvas.getContext("2d");
			var img = new Image();
			img.onload = function(){
				mCtx.drawImage(img,10,10);
			}
			img.src = "../img/lyf.jpg";
		}

效果：

2、Canvas中定位图像，并规定图像的宽度与高度：

/**
 * img  所要绘制的图像元素
 * x    该元素绘制的起点x坐标 （即img左上角x坐标）
 * y    该元素绘制的起点y坐标 （即img左上角y坐标）
 * width  所要绘制该元素的最长宽度（即画布上允许图像出现的最长宽度）根据比例缩放
 * height 所要绘制该元素的最大高度（即画布上允许图像出现的最大高度）根据比例缩放
 */
context.drawImage(img,x,y,width,heiight);

举例：

var ComTimerNew = {
		
		initView: function(){
			var mCanvas = document.getElementById("canvas");
			var mCtx = mCanvas.getContext("2d");
			var img = new Image();
			img.onload = function(){
				mCtx.drawImage(img,20,20,200,300);
			}
			img.src = "../img/lyf.jpg";
		},
	};

效果：

3、Canvas中定位图像，并规定图像的宽度与高度，同时指定裁剪图像中的模块区域：

/**
 * img  所要绘制的图像元素
 * x    该元素绘制的起点x坐标 （即img左上角x坐标）
 * y    该元素绘制的起点y坐标 （即img左上角y坐标）
 * width  所要绘制该元素的最长宽度（即画布上允许图像出现的最长宽度）
 * height 所要绘制该元素的最大高度（即画布上允许图像出现的最大高度）
 * 
 * s 相关参数都以原始图片的宽高来参照的：如原始规格长：365、高：549
 * sx   指定该元素从什么位置开始裁剪的x坐标
 * sy   指定该元素从什么位置开始裁剪的y坐标
 * swidth  	规定所裁剪图像的长度（即裁剪从sx点开始，向右延伸swidth的长度裁剪）
 * sheight	规定所裁剪图像的高度（即裁剪从sy点开始，向下延伸sheight的长度裁剪）
 */
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,heiight);

举例：

var drawImag = function(){
			var mCanvas = document.getElementById("canvas");
			var mCtx = mCanvas.getContext("2d");
			var img = new Image();
			img.onload = function(){
				mCtx.drawImage(img,20,20);//原始规格长：365、高：549
				mCtx.drawImage(img,100,20,200,300,400,20,200,300);
			}
			img.src = "../img/lyf.jpg";
		}

效果：（备注：红色框内的大小应与右边小图大小一致，因为是手动画的红色框，所以大小有出入，嘎嘎....）

蓝色参数表示相应的sx、sy、swidth、sheight，（这里的参数值都是依照原始参数值来裁剪的，也可以理解为drawImage（img，x，y）所绘制出的图形）红色的代表x、y、width、height。

如果swidth ！= width，sheight ！= height，那么，裁剪出的图片会以width、height的比例进行缩放显示。。。。。。比例计算不好的话，会让图片变得模糊或者歪曲。。。。（修正一下错误，右边小图左上角的坐标应该为（400，20））

猜你喜欢