path: root/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.html

---
title: Canvas的基本用法
slug: Web/API/Canvas_API/Tutorial/Basic_usage
tags:
  - Canvas
  - HTML
  - 中级
  - 图像
  - 教程
translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
---
<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div>

<div class="summary">
<p>让我们通过了解 {{HTMLElement("canvas")}} {{Glossary("HTML")}} 元素本身开始本教程。在本页结束时，你会了解到如何去设置一个 canvas 2D 上下文以及如何在你的浏览器上创建第一个例子。</p>
</div>

<h2 id="&lt;canvas>_元素"> <code>&lt;canvas&gt;</code> 元素</h2>

<pre class="brush: html">&lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
</pre>

<p>{{HTMLElement("canvas")}} 看起来和 {{HTMLElement("img")}} 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，<code>&lt;canvas&gt;</code> 标签只有两个属性<strong>——</strong> {{htmlattrxref("width", "canvas")}}和{{htmlattrxref("height", "canvas")}}。这些都是可选的，并且同样利用 {{Glossary("DOM")}} <a href="/zh-CN/docs/Web/API/HTMLCanvasElement">properties</a> 来设置。当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。该元素可以使用{{Glossary("CSS")}}来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：<span class="short_text" id="result_box" lang="zh-CN"><span>如果</span><span>CSS</span></span><span class="gt-baf-back">的尺寸</span><span class="short_text" lang="zh-CN"><span>与</span><span>初始</span><span>画布的</span><span>比例不一致</span><span>，</span><span>它会出现</span><span>扭曲</span><span>。</span></span></p>

<div class="note">
<p><strong>注意:</strong> 如果你绘制出来的图像是扭曲的, 尝试用width和height属性为&lt;canvas&gt;明确规定宽高，而不是使用CSS。</p>
</div>

<p><a href="/zh-CN/docs/Web/HTML/Global_attributes/id"><code>id</code></a>属性并不是&lt;canvas&gt;元素所特有的，而是每一个HTML元素都默认具有的属性（比如class属性）。给每个标签都加上一个id属性是个好主意，因为这样你就能在我们的脚本中很容易的找到它。</p>

<p>&lt;canvas&gt;元素可以像任何一个普通的图像一样（有{{cssxref("margin")}}，{{cssxref("border")}}，{{cssxref("background")}}等等属性）被设计。然而，这些样式不会影响在canvas中的实际图像。我们将会在一个<span class="short_text" id="result_box" lang="zh-CN"><span><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">专门的章节</a>里</span></span>看到这是如何解决的。当开始时没有为canvas规定样式规则，其将会完全透明。</p>

<div id="section_2">
<h3 id="替换内容">替换内容</h3>

<p>&lt;canvas&gt;元素与{{HTMLElement("img")}}标签的不同之处在于，就像{{HTMLElement("video")}}，{{HTMLElement("audio")}}，或者 {{HTMLElement("picture")}}元素一样，<span class="short_text" id="result_box" lang="zh-CN"><span>很容易</span><span>定义一些</span><span>替代内容</span></span><span lang="zh-CN"><span>。</span></span>由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者<span class="short_text" id="result_box" lang="zh-CN"><span>文本</span><span>浏览器</span></span>不支持HTML元素"canvas"，在这些浏览器上你应该总是能展示替代内容。</p>

<p>这非常简单：我们只是在&lt;canvas&gt;标签中提供了替换内容。不支持&lt;canvas&gt;的浏览器将会忽略容器并在其中渲染后备内容。而支持&lt;canvas&gt;的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。</p>

<p>举个例子，我们可以提供对canvas内容的文字描述或者是提供动态生成内容相对应的静态图片，如下所示：</p>

<pre class="brush: html">&lt;canvas id="stockGraph" width="150" height="150"&gt;
  current stock price: $3.15 +0.15
&lt;/canvas&gt;

&lt;canvas id="clock" width="150" height="150"&gt;
  &lt;img src="images/clock.png" width="150" height="150" alt=""/&gt;
&lt;/canvas&gt;
</pre>

<h3 id="&lt;canvas>_标签不可省"> <code>&lt;/canvas&gt;</code> 标签不可省</h3>

<p>与 {{HTMLElement("img")}} 元素不同，{{HTMLElement("canvas")}} 元素<strong>需要</strong>结束标签(<code>&lt;/canvas&gt;</code>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。</p>

<p>如果不需要替代内容，一个简单的 <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt; </code>在所有支持canvas的浏览器中都是完全兼容的。</p>

<h2 id="渲染上下文（The_rendering_context）">渲染上下文（The rendering context）</h2>

<p>{{HTMLElement("canvas")}} 元素创造了一个固定大小的画布，它公开了一个或多个<strong>渲染上下文</strong>，其可以用来绘制和处理要展示的内容。我们将会将注意力放在2D渲染上下文中。其他种类的上下文也许提供了不同种类的渲染方式；比如， <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> 使用了基于<a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a>的3D上下文 ("experimental-webgl") 。</p>

<p>canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。{{HTMLElement("canvas")}} 元素有一个叫做 {{domxref("HTMLCanvasElement.getContext", "getContext()")}} 的方法，这个方法是用来获得渲染上下文和它的绘画功能。<code>getContext()</code>接受一个参数，即上下文的类型。对于2D图像而言，如本教程，你可以使用 {{domxref("CanvasRenderingContext2D")}}。</p>

<pre class="brush: js">var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
</pre>

<p>代码的第一行通过使用 {{domxref("document.getElementById()")}} 方法来为 {{HTMLElement("canvas")}} 元素得到DOM对象。一旦有了元素对象，你可以通过使用它的getContext() 方法来访问绘画上下文。</p>

<div id="section_5">
<h2 id="检查支持性">检查支持性</h2>

<p>替换内容是用于在不支持 {{HTMLElement("canvas")}} 标签的浏览器中展示的。通过简单的测试<code>getContext()方法的存在，脚本可以检查编程支持性</code>。上面的代码片段现在变成了这个样子：</p>

<pre class="brush: js">var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}
</pre>
</div>
</div>

<h2 id="一个模板骨架">一个模板骨架</h2>

<p>这里的是一个最简单的模板，我们之后就可以把它作为之后的例子的起点。</p>

<div class="note">
<p><strong>注意: </strong>为了简洁, 我们在HTML中内嵌了script元素, 但并不推荐这种做法。</p>
</div>

<pre class="brush: html">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Canvas tutorial&lt;/title&gt;
    &lt;script type="text/javascript"&gt;
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    &lt;/script&gt;
    &lt;style type="text/css"&gt;
      canvas { border: 1px solid black; }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body onload="draw();"&gt;
    &lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>上面的脚本中包含一个叫做draw()的函数，当页面加载结束的时候就会执行这个函数。通过使用在文档上加载事件来完成。只要页面加载结束，这个函数，或者像是这个的，同样可以使用 {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}， {{domxref("WindowTimers.setInterval", "window.setInterval()")}}，或者其他任何事件处理程序来调用。</p>

<p>模板看起来会是这样。<span class="short_text" id="result_box" lang="zh-CN"><span>如这里所示</span><span>，</span><span>它</span><span>最初是</span><span>空白的</span><span>。</span></span></p>

<p>{{EmbedLiveSample("%E4%B8%80%E4%B8%AA%E6%A8%A1%E6%9D%BF%E9%AA%A8%E6%9E%B6", 160, 160)}}</p>

<h2 id="一个简单例子">一个简单例子</h2>

<p>一开始，让我们来看个简单的例子，我们绘制了两个有趣的长方形，其中的一个有着alpha透明度。我们将在接下来的例子里深入探索一下这是如何工作的。</p>

<pre class="brush: html">&lt;html&gt;
 &lt;head&gt;
  &lt;script type="application/javascript"&gt;
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="draw();"&gt;
   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>例子看起来像是这样：:</p>

<p>{{EmbedLiveSample("%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E4%BE%8B%E5%AD%90", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>

<p>{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</p>