内嵌图像
Canvas在内嵌图像方面使用drawImageO方法，此方法可使用三种不同的参数系(也可使用3种、5种或9种参数)：
context.drawlmage(image,dx,dy)
context.drawlmage(image,dx,dy,dw,dh)
context.drawlmage(image,sx,sy,sw,sh,dx,dy,dw,dh)在3个案例中我们都需要在第一个参数中放人图像、画布或视频元素，这一点可以通过JavaScript动态整合或通过静态HTML编码实现。但动画片及美术片不会动态呈现，只会静态显示第一帧或在有海报页的情况下显示海报。
drawImageO方法的所有其他参数用于影响位置、尺寸，以及修剪源图像以渲染目标画布。图2形象化地展示了可能的位置参数，其中s前缀代表源，d前缀代表尺寸。
下面让我们用3个简单例子来比较一下不同的drawImageO方法。它们都基于一张x像素的图片，作为JavaScript对象被动态创建(见图2)。
varimage=newImage();
image.src='images/yosemite.jpg';
除了我们将在案例中谈到的像素尺寸外，图2展示了从塔夫脱峰上拍摄的约塞米蒂国家公园埃尔卡皮坦山米髙的壮观岩石地貌。此图片目前通过三种可行参数系中的一种，被加载入00像素的目标画布区中。第一个也是最简单的一个选择用dx/dy决定目标绘图区中图像的最左上角的点。在我们的案例中，此为位置〇/〇:
image.onload=function(){context.drawlmage(image,);〉；宽度及髙度原封不动地采用了原图像的尺寸。由于原图像比目标绘图区要大，我们只能在绘图区中看见塔夫脱峰的左上角。
要在绘图区中显示完整图片，
宁波网站建设认为我们需要将宽度及髙度用参数dw/dh定义。这种情况下浏览器会将图像缩放至x像素，结果如图4所示。
image.onload=function(){context.drawlmage(image,0)；〉；与此前提过的两种也可用CSS实现的drawImageO形式相反，第三种形式在图像工作中提供了全新的方法。我们可以将源图像的任意部分(sx，sy，sw,sh)复制至目标绘图区的制定区域(dx，dy，dw,dh)，从而扫清图像剪辑道路上的一切障碍。
image.onload=function(){context.drawlmagefimage,);context.drawlmage()image,00,300,90,10,50第一个drawlmage()将图片从左上角展开；第二个drawlmage()选取了埃尔卡皮坦山的区域并将其画成一个图标，置于右上方，再加上带阴影的文字构成了明信片的基本布局。
若你更喜欢将埃尔卡皮坦山作为背景，而将塔夫脱作为右上方的图表，仅需要将drawImageO调用作一些小的更改。在这里你可以通过单击画布来完成：
canvas.onclick=function(){context.drawlmage(image,50,00,0〉0,00context.drawlmage(
image,0,,
)；
}；
于是形成了的图像。
这是一段用图片作为源的关于drawImageO的简介，在节中，你还可以找到使用视频元素作为drawImageO的首个参数的详细案例。首先我们先来看一下如何在画布中读写像素值。
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
