• 當前位置：創(chuàng)新互聯(lián) >> 常見問題 >> 前端開發(fā) >> html >> HTML 5 canvas基本語法

HTML 5 canvas基本語法

• 作者：創(chuàng)新互聯(lián) 文章來源：前端開發(fā)部 點擊數(shù)： 更新時間：2008-07-12
• 　　創(chuàng)建 canvas 的方法很簡單，只需要在 HTML 頁面中添加 <canvas> 元素：
  
  <canvas id="myCanvas" width="300" height="150">
  Fallback content, in case the browser does not support Canvas.
  </canvas>為了能在 JavaScript 中引用元素，最好給元素設置 ID ；也需要給 canvas 設定高度和寬度。
  
  　　創(chuàng)建好了畫布后，讓我們來準備畫筆。要在畫布中繪制圖形需要使用 JavaScript 。首先通過 getElementById 函數(shù)找到 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 介紹了如何創(chuàng)建 canvas 后，讓我們來看看 2D canvas API，看看能用這些函數(shù)做些什么。
• HTML 元信息 :上一篇
  Nofollow標簽有什么作用？ :下一篇