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

html5教程 （一）（canvas绘制简单的矩形）

2011-06-08 23:16 381 查看
<!DOCTYPE html>

<html>
<head>
<title>html5</title>
</head>

<body>
<!--
创建 canvas 的方法很简单，只需要在 HTML 页面中添加 <canvas>元素：
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
为了能在 JavaScript 中引用元素，最好给元素设置 ID ；也需要给 canvas 设定高度和宽度。
下面的实例创建了一个300X200的画布
创建好了画布后，让我们来准备画笔。要在画布中绘制图形需要使用 JavaScript 。
首先通过 getElementById函数找到 canvas元素，然后初始化上下文。
之后可以使用上下文 API 绘制各种图形。下面的脚本在 canvas 中绘制一个矩形
-->
<canvas id="myCanvas" width="300" height="200">
</canvas>
<script type="text/javascript">
var elem = document.getElementById("myCanvas");

if (elem && elem.getContext) {
//getContext("2d") 对象是内建的 HTML5 对象，
//拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var context = elem.getContext("2d");

if (context) {
//fillStyle 方法将其染成红色
context.fillStyle = "#00f"; //blue
context.strokeStyle = "#f00"; // red
context.lineWidth = 4 //线框宽度
//fillRect 方法规定了形状、位置和尺寸。
context.fillRect (0, 0, 150, 50);
// strokeRect 可以绘制只有边框没有填充的矩形
context.strokeRect(0, 60, 150, 50);
//清除部分 canvas 可以使用 clearRect
context.clearRect (30, 25, 90, 60);
context.strokeRect(30, 25, 90, 60);
//上面的 fillRect 方法拥有参数 (0,0,150,150)。
//意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航