- 注册时间
- 2010-7-26
- 最后登录
- 2012-4-24
- 阅读权限
- 200
- 积分
- 1415
- 精华
- 6
- 帖子
- 542
|
发表于 2010-10-6 15:59:19
|显示全部楼层
简介
Apple最初创建了Canvas元素，它不仅用于它的Safari浏览器，而且也用在Mac OS X Dashboard中。它最终被WhatWG组织收录，并且还纳入到了将来的HTML 5.0的实现中。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。
创建Canvas元素
- <canvas id=”canvas” width=”150″ height=”150″></canvas>
画一个矩形
先看代码：- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>HTML5 Canvas教程 - www.html51.com</title>
- </head>
- <body>
- <canvas id="canvas" width="150" height="150"></canvas>
- <script type="text/javascript">
- var canvas = document.getElementById('canvas');
- var ctx = canvas.getContext('2d');
- ctx.fillStyle = 'rgb(0,0,200)';
- ctx.fillRect(10, 10, 150, 150);
- </script>
- </body>
- </html>
- 获取canvas元素
- 初始化canvas上下文
- 使用相关API绘制图形
效果图：
上面的效果图canvas的网格，刚才的图形，x=10,y=10, width=150, height=150，不像svg, canvas仅支持一种图形——矩形，所有其它复杂的图形都是通过一些函数来组成的。
点此查看本例效果
|
|
发表于 2010-10-6 18:38:17
发表于 2011-2-25 15:37:20
