下载文档原格式
HTML5使⽤drawImage（）⽅法绘制图像⼀、绘制图像使⽤drawImage()⽅法绘制图像。
绘图环境提供了该⽅法的三个不同版本。
drawImage(image,x,y) ：在canvas中(x,y)处绘制图⽚。
drawImage(image,x,y,width,height) ：在canvas中(x,y)处绘制图⽚，并将其缩放到指定的宽度和⾼度。
drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height) ：从图⽚中切割出⼀个矩形区域(sourceX,sourceY,sourceWidth,sourceHeight)，缩放到指定的宽度和⾼度，并在canvas中(x,y)绘制出来。
⼆、<img>标签绘制图⽚前，还需要将图⽚加载到浏览器中。
这⾥我们仅仅在canvas标签后⾯添加⼀个<img>标签。
<img src = "tk.jpg" id = "tkjpg">三、绘制图⽚复制代码代码如下:<!DOCTYPE html><html><head><meta http-equiv="Content-type" content="text/html; charset = utf-8"><title>HTML5</title><script type="text/javascript" charset = "utf-8">//这个函数将在页⾯完全加载后调⽤function pageLoaded(){//获取canvas对象的引⽤,注意tCanvas名字必须和下⾯body⾥⾯的id相同var canvas = document.getElementById('tCanvas');//获取该canvas的2D绘图环境var context = canvas.getContext('2d');//获取图⽚对象的引⽤var image = document.getElementById('tkjpg');//在(0,50)处绘制图⽚context.drawImage(image,0,50);//缩⼩图⽚⾄原来的⼀半⼤⼩context.drawImage(image,200,50,165/2,86/2);//绘制图⽚的局部(从左上⾓开始切割0.7的图⽚)context.drawImage(image,0,0,0.7*165,0.7*86,300,70,0.7*165,0.7*86);}</script></head><body onload="pageLoaded();"><canvas width = "500" height = "200" id = "tCanvas" style = "border:black 1px solid;"><!--如果浏览器不⽀持则显⽰如下字体-->提⽰：你的浏览器不⽀持<canvas>标签</canvas><img src = "tk.jpg" id = "tkjpg"></body></html>四、绘制效果五、附上原坦克素材。
使⽤html5canvas绘制图⽚注意：本⽂属于《》系列⽂章中的⼀部分。
如果你是html5初学者，仅仅阅读本⽂，可能⽆法较深⼊的理解canvas，甚⾄⽆法顺畅地通读本⽂。
请点击上述链接以了解使⽤html5 canvas绘制图形的完整内容。
在html5中，除了利⽤canvas绘制⽮量图形之外，我们还可以在canvas「画布」上绘制现有的图像⽂件。
⾸先，我们来看看使⽤canvas绘制图像⽂件需要⽤到CanvasRenderingContext2D对象的哪些主要属性和⽅法：drawImage(mixed image, int x, int y)以canvas上指定的坐标点开始，按照图像的原始尺⼨⼤⼩绘制整个图像。
这⾥的image可以是Image对象，也可以是Canvas对象(下同)。
drawImage(mixed image, int x, int y, int width, int height)以canvas上指定的坐标点开始，以指定的⼤⼩(width和height)绘制整个图像，图像将根据指定的尺⼨⾃动进⾏相应的缩放。
drawImage(mixed image, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)将指定图像的局部图像(以(imageX, imageY)为左上⾓、宽度为imageWidth、⾼度为imageHeight的矩形部分)绘制到canvas中以(canvasX,canvasY)为左上⾓坐标、宽度为canvasWidth、⾼度为canvasHeight的矩形区域中是的，你没有看错。
要在canvas中绘制图像，我们可以使⽤⼀个名为drawImage()的⽅法，不过该⽅法具有三种不同的变体，每个⽅法变体允许接收的参数不仅数量不同，连参数的含义也不尽相同。
实验五拖动动画、滤镜动画、关联动画一、拖动动画1．在舞台中添加3张图片，并将它们上下相接2．同时选中所有图片，点击鼠标右键，弹出菜单中选择“组”-“组合”，此时3张图片已经变成了一组图片。
观察属性面板的第一行，已经显示为“组”。
3．将属性面板的“拖动/旋转”按钮设置为“垂直拖动”，如下图，4．预览动画，此时可以在整个屏幕区用手指上下拖动图片。
5．如果欲将图片控制在某个特定区域内显示，而不是满屏显示，可以做如下修改：(1)将上述步骤3还原回原来的设置，即将“拖动/旋转”按钮设置为“不允许”；(2)将属性面板的“组类型”设置为“裁剪内容”，此时组类型的下方会出现“允许滚动”的选项，将其设置为“垂直滚动”，如下图：(3)点击工具栏的“变形”工具，回到舞台中，将组合后的图片变形缩小到合适的尺寸（通常比舞台尺寸小），并拖放到目标位置，例如下图中的红框区域：(4)预览动画，此时只能在目标区域（红框）内才可以上下拖动图片，区域外不可拖动。
(5)如果将“垂直滚动”更改为“自由滚动”，则在上下和左右两个方向均可以实现拖动。
(6)注：在电脑上预览时，目标区域中会出现上下或左右滚动条。
而通过二维码共享在手机端浏览时，不会出现滚动条，只能通过手指来拖动图片。
二、滤镜动画1．制作动画（关键帧动画、变形动画等）2．在时间线上选中某一个关键帧，在属性面板中对“滤镜”按钮进行设置，如下图，例如选择“模糊”滤镜。
然后点击后面的加号“+”，在弹出的滚动条上设置具体的“模糊”数值。
3．回到时间线上，选中同一图层的另一个关键帧，对该关键帧设置和步骤2一样的滤镜选项（本例中再次选择“模糊”滤镜，并设置一个和步骤2不同的“模糊”数值）。
4．如果需要添加多个滤镜，则重复上述步骤2和3，可以继续添加其他滤镜效果。
三、动画的关联关联动画，是将动画与某个对象绑定。
动画的播放与停止，受该对象的控制。
1．舞台动画的关联(1)将第一个图层重新命名为“风景”，在第1帧插入一个宽幅面的风景图，其宽度比舞台宽度大很多，将风景图的左边界和舞台左边界对齐；(2)在第30帧“插入关键帧动画”，在第30帧，拖动风景图，将该图的右边界和舞台的右边界对齐。
HTML5图像和多媒体网页图像有很多种，如图标，Logo, 新闻图片，人物流，产品小图，广告大图等。
本文将介绍如何在HTMLS中插入图像、图标、视频，以及如何对图像和图标进行布局。
1.1定义图像使用<img>标签可以把图像插入网页中。
<img src=”image.jpg”width =“400”alt=”图片链接”>src: 定义显示图像的URL。
alt: 设置图像的替代文本。
1.2定义流流表示图表，照片，图形，插图，代码片段等独立的内容。
HTML使用figure和figcaption 引入流，其中figcaption表示流的标题。
<figure><figcation>九月份汽车销量排行榜</figcation><img src=”peihang.png”width=”300”></figure>1.3定义图标网站图标一般显示在浏览器选项卡，历史记录，书签，收藏夹或地址栏中。
图标大小为16*16px,透明背景。
<link rel=”icon”, href=”/text.ico” type = “image/x-icon”>1.4响应式图像<picture>标签仅作为容器，可以包含一个或者多个子标签。
包含如下属性：Srcset: 设置图片文件路径。
Media：设置媒体查询。
Sizes：设置宽度。
Type: 设置MIME类型。
<picture><source media=”(min-width: 650px)”srcset=”images/test.png”></source></picture>响应屏幕方向Orientation用来表示响应屏幕方向，纵向显示portrait，横向显示landscape。
<picture><source media=” orientation: portrait”srcset=”images/test.png”></source><source media=” orientation: landscape)”srcset=”images/test.png”></source></picture>1.5响应像素密度当设计像素密度为2x时，后缀加载为text_2x.png图片，当像素密度为1x时加载text.png 图片。
