Canvas学习笔记(七)--应用图像

lib

浏览: 135733 次
性别:
来自: 济南

最近访客更多访客>>

xuecaobao123

书生Zhuang

ananiah

max530

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html5
web前端
canvas

web前端 html5 canvas

1、图像简介

此功能可以用于图片合成或者制作背景等。目前仅可以在图像中加入文字（标准说明中并没有包含绘制文字的功能）、加入图片（如 PNG，GIF，JPEG等）、加入其他的canvas元素。

2、引入图像的步骤

1）获取JavaScript的Image对象或者其它的canvas元素。但不能是简单的image路径或url；

2）使用drawImage()函数绘制图形；

3、获取图像的方式

1）使用页面中存在的图片。通过ocument.images 、document.getElementsByTasName

、document.getElementById方法来获取页面内的图片;

2）使用其它的已经准备好的canvas元素。使用document.getElementsByTasName

或者document.getElementById方法来获取；

3）使用脚本创建新的Image对象。需要注意图片预加载的问题。

4）使用data:url引用图片。优点：减少图片连接数，图片变成了页面的一部分，不需要额外的请求服务器。缺点：图片无法缓存，增加页面的大小。

4、绘制图像的方法介绍

drawImage(image,x,y)--绘制简单图像

image：image对象或者canvas对象；

x，y：图像在画布中的起始坐标；

drawImage(image,x,y,width,height)--图像缩放

image：image对象或者canvas对象；

x，y：图像在画布中的起始坐标；

width：图像显示的宽度；

height：图像显示的高度；

drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)--图像切片

image：image对象或者canvas对象；

sx，sy：切片在图像源中的起始坐标；

sWidth，sHeight：切片在图像源中的宽度和高度；

dx，dy：切片在目标中显示的起始坐标；

dWidth，dHeight：切片在目标中相识的宽度和高度；

可以参考下面的图片：

5、绘图实例

代码实例如下：

<!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>
  	<style type="text/css">
		.wraper {
			position: relative;
			float: left;
			margin-left: 10px;
			margin-top: 10px;
			border: 1px solid orange;
		}
  	</style>
	<script type="text/javascript">
		function draw(){

			//简单的绘制图像（一）
			var image = new Image();
			image.src = "image/gateway-logo1.jpg";

			var canvas1 = document.getElementById('test1');
			if(canvas1.getContext){
				var context = canvas1.getContext('2d');
				context.drawImage(image,10,10);
			}

			//简单的绘制图像（二）
			var can2 = document.getElementById('test2');
			var image2 = new Image();
			image2.onload = function(){
				if(can2.getContext){
					var cxt2 = can2.getContext('2d');
					cxt2.drawImage(image2,0,10);

					cxt2.strokeStyle = "rgba(0,0,200,1)";
					cxt2.beginPath();
					cxt2.moveTo(40,160);
					cxt2.lineTo(50,100);
					cxt2.lineTo(100,20);
					cxt2.lineTo(130,150);
					cxt2.lineTo(180,80);
					cxt2.stroke();
				}
			};
			image2.src = "image/XY.png";

			//图像缩放
			var image3_1 = new Image();
			image3_1.src = "image/ac.jpg";

			var image3_2 = new Image();
			image3_2.src = "image/ac_2.jpg";

			
			var can3 = document.getElementById('test3');
			if(can3.getContext){
				var cxt3 = can3.getContext('2d');

				cxt3.drawImage(image3_1,5,5,90,90);
				cxt3.drawImage(image3_2,100,100,90,90);
			}

			//图像切片
			var can4 = document.getElementById('test4');
			var image4 = new Image();
			image4.onload = function(){
				if(can4.getContext){
					var cxt4 = can4.getContext('2d');

					cxt4.drawImage(image4,620,175,100,170,50,10,100,180);
				}
			};
			image4.src = "image/ac_2.jpg";

			

		}
	</script>
  </head>	
  
  <body onload="draw();">
	
	<canvas id="test1" width="200px" height="200px" class="wraper"></canvas>

	<canvas id="test2" width="200px" height="200px" class="wraper"></canvas>

	<canvas id="test3" width="200px" height="200px" class="wraper"></canvas>

	<canvas id="test4" width="200px" height="200px" class="wraper"></canvas>


  </body>
</html>

显示的效果：