Canvas学习笔记(七)--应用图像_H5之家 - 中国HTML5教程资源分享第一站

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、绘图实例

代码实例如下：

			Js代码  

			<!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>

显示的效果：