您的位置：首页 > Web前端 > HTML5

html5教程（四）（canvas使用图像）

2011-06-16 11:55 621 查看

<!DOCTYPE HTML ">

<html>
<head>
<title> canvas 图像 </title>
<meta charset="utf-8" />
</head>

<body>
<canvas id="my_canvas" width="400" height="400" style="border:1px solid #f000ff"></canvas>

<script type="text/javascript">
var elem = document.getElementById("my_canvas");
if (elem && elem.getContext) {
var context = elem.getContext("2d");
var img = new Image();
img.src=\'#\'" /div>
/*
drawImage 方法允许在 canvas 中插入其他图像
( img 和 canvas 元素) 。在 Opera 中可以再 canvas 中绘制 SVG 图形。此方法比较复杂，可以有3个、5个或9个参数

3个参数：最基本的 drawImage使用方法。一个参数指定图像位置，另两个参数设置图像在 canvas中的位置。
5个参数：中级的 drawImage 使用方法，包括上面所述3个参数，加两个参数指明插入图像宽度和高度 (如果你想改变图像大小)。
9个参数：最复杂 drawImage 杂使用方法，包含上述5个参数外，另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。
*/
context.drawImage(img, 0, 0); //三个参数
context.drawImage(img,10,10, 200,200); //五个参数
//context.drawImage(img,50,50,200,200,10,10,20,20); //九个参数(？？？)
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

html5教程 （四）（canvas使用图像）

html5教程（四）（canvas使用图像）