HTML5中canvas知识点详解7-使用图像

最新推荐文章于 2022-03-14 20:33:36 发布

chenzhong5173

最新推荐文章于 2022-03-14 20:33:36 发布

阅读量143

点赞数

文章标签： xhtml

原文链接：https://my.oschina.net/dreamchenming/blog/675753

版权

一.绘制图像方法

1.drawImage(image,x,y);

2.drawImage(image,x,y,w,h);

3.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

二.图像的平铺

createPattern(image,type) ---type:①no-repeat;②repeat-x;③repeat-y;④repeat

三.像素的处理

1.获得图像的像素：getImageData(sx,sy,sw,sh); 获得的对象具有height，width,data属性

2. putImageData(img,dx,dy,....);

四.知识点巩固(更改注释看看每一个知识点的用法)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用图像</title>
<script>
window.onload = function(){
	var oC= document.getElementById('can');
	var oCt = oC.getContext('2d');
	oCt.fillStyle = '#c0c0c0';
	oCt.fillRect(0,0,500,500);

	var img = new Image();
	img.src = '1.gif';
/*	//1.绘制图像三种方法
	//drawImage(image,x,y);drawImage(image,x,y,w,h);drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
	img.onload = function(){//使用onload事件，可以使得不用完全等待网络元素加载完成之后在画图
		//oCt.drawImage(img,0,0);
		oCt.drawImage(img,0,0,200,200);
		oCt.drawImage(img,0,0,200,400,210,0,200,200);
	};*/
/*	//2.图像的平铺
	//createPattern(image,type) type:①no-repeat;②repeat-x;③repeat-y;④repeat
	//创建平铺对象
	var cP = oCt.createPattern(img,'repeat');
	//指定填充样式
	oCt.fillStyle = cP;
	//填充画布
	oCt.fillRect(0,0,500,500);*/
	//3.像素的处理
	//获得图像的像素：getImageData(sx,sy,sw,sh);putImageData(img,dx,dy,....);获得的对象具有height，width,data属性
	img.onload = function(){
	    oCt.drawImage(img,0,0,200,200);
		//获取区域范围的像素
		var imgData = oCt.getImageData(0,0,200,200);
		//对其像素进行一个变化
		for(var i = 0;i< imgData.data.length;i+=4){
			imgData.data[0+i] = 255 - imgData.data[0+i];
			imgData.data[1+i] = 255 -  imgData.data[1+i];
			imgData.data[2+i] = 255 - imgData.data[2+i];
			imgData.data[3+i] = 100;
		} 
		oCt.putImageData(imgData,200,0);
	};
};
</script>
</head>

<body>
<canvas id='can' width="500px" height="500px"></canvas>
</body>
</html>

转载于:https://my.oschina.net/dreamchenming/blog/675753