• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> html >> HTML 5 canvas基本语法

HTML 5 canvas基本语法

• 作者：创新互联 文章来源：前端开发部 点击数： 更新时间：2008-07-12
• 　　创建 canvas 的方法很简单，只需要在 HTML 页面中添加 <canvas> 元素：
  
  <canvas id="myCanvas" width="300" height="150">
  Fallback content, in case the browser does not support Canvas.
  </canvas>为了能在 JavaScript 中引用元素，最好给元素设置 ID ；也需要给 canvas 设定高度和宽度。
  
  　　创建好了画布后，让我们来准备画笔。要在画布中绘制图形需要使用 JavaScript 。首先通过 getElementById 函数找到 canvas元素，然后初始化上下文。之后可以使用上下文 API 绘制各种图形。下面的脚本在 canvas 中绘制一个矩形 (点击此处查看效果)：
  
  // Get a reference to the element.
  var elem = document.getElementById('myCanvas');
  // Always check for properties 和 methods, to make sure your code doesn't break
  // in other browsers.
  if (elem && elem.getContext) {
    // Get the 2d context.
    // Remember: you can only initialize one context per element.
    var context = elem.getContext('2d');
    if (context) {
      // You are done! Now you can draw your first rectangle.
      // You only need to provide the (x,y) coordinates, followed by the width and
      // height dimensions.
      context.fillRect(0, 0, 150, 100);
    }
  }
  
  　　可以把上面代码放置在文档 head 部分中，或者放在外部文件中。 2D context API 介绍了如何创建 canvas 后，让我们来看看 2D canvas API，看看能用这些函数做些什么。
• HTML 元信息 :上一篇
  Nofollow标签有什么作用？ :下一篇