【门户网站建设的报价】
其中的参数含义如下。
image：要绘制的图像。
x，y：要绘制图像左上角的坐标。
width，height：图像实际绘制的尺寸，指定这些参数使得图像可以缩放。
sourceX，sourceY：所要绘制图像区域的左上角。
sourceWidth，sourceHeight：所要绘制图像区域的大小。
destX, destY：所要绘制图像区域的左上角的画布坐标。
destWidth，destHeight：所要绘制图像区域的画布大小。
【案例5-14】把一幅图像放置到画布上。
【案例展示】本例文件5-14.html在浏览器中的显示效果如图5-15所示。
【学习目标】掌握绘制图像的方法。
【知识要点】掌握绘制图像的相关方法和属性。
代码如下：
<! doctype html>
<html>
<head>
<meta charset=”gb2312”>
<title>绘制图像<／title>
<／head>
图5-15 页面的显示效果
<body>
<canvas id="myCanvas" width="200" height="100" style="border:lpx solid #c3c3c3;">
您的浏览器不支持canvas元素．
</canvas>
<script type="text/j avascript">
var c=document.getElementByld("myCanvas");
var cxt=c.getContextC'2d");
var img=new Image();
img.src="flower.png";
cxt.drawImage(img,0,0);
</script>
</body>
／／获取画布对象
／／获取画布上绘图的环境
本文地址:
http://www.yishenzhou.com/yes/post/354.html | 分类:事件营销 |
次阅读
