canvas游戏开发学习之一：初识<canvas>标签

黄舟原创: 2017-01-16 16:52:01 1040浏览

让我们从<canvas>元素的定义开始吧。

<canvas id="myCanvas" width="150" height="150"></canvas>

<canvas>看起来很像<img>，唯一不同就是它不含src
和alt
属性。它只有两个属性，width 和 height，两个都是可选的，并且都可以用DOM 或者 CSS来设置。如果不指定width 和 height，默认的是宽300像素，高150像素。虽然可以通过 CSS来调整canvas的大小，但渲染图像会缩放来适应布局的（如果你发现渲染结果看上去变形了，不必一味依赖CSS，可以尝试显式指定canvas的width 和 height 属性值）。</canvas>结束标签是必须的。

<canvas>元素可以像普通图片一样指定其样式（边距，边框，背景等等）。然而这些样式并不会对canvas实际生成的图像产生什么影响。下面我们会看到如何应用样式。如果不指定样式，canvas默认是全透明的。

因为<canvas>
相对较新，有些浏览器并没实现，如Firefox 1.0 和 Internet Explorer，所以我们需要为那些不支持canvas的浏览器提供替用显示内容。我们只需要直接在canvas元素内插入替用内容即可。不支持canvas的浏览器会忽略canvas元素而直接渲染替用内容，而支持的浏览器则会正常地渲染canvas。例如，我们可以把一些文字或图片填入canvas内，作为替用内容：

<canvas id="game" width="150" height="150">
  Oh dear, your browser dosen't support HTML5! Tell you what, why don't you upgrade to a decent browser - you won't regret it!</canvas>

<canvas id="clock" width="150" height="150">
  <imgsrc="images/clock.png" width="150" height="150"/>
</canvas>

<canvas>创建的固定尺寸的绘图画面开放了一个或多个渲染上下文（rendering context），我们可以通过它们来控制要显示的内容。我们专注于2D 渲染上，这也是目前唯一的选择，可能在将来会添加基于OpenGL ES 的 3D 上下文。

<canvas> 初始化是空白的，要在上面用脚本画图首先需要其渲染上下文（rendering context），它可以通过 canvas 元素对象的getContext
方法来获取，同时得到的还有一些画图用的函数。getContext()
接受一个用于描述其类型的值作为参数。getContext()返回一个CanvasRenderingContext2D对象。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

上面第一行通过 getElementById方法取得 canvas 对象的 DOM 节点。然后通过其getContext
方法取得其画图操作上下文。

除了在那些不支持的浏览器上显示替用内容，还可以通过脚本的方式来检查浏览器是否支持 canvas 。方法很简单，判断getContext
是否存在即可。

var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

我们会用下面这个最简化的代码模板来（后续的示例需要用到）作为开始。

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

细心的你会发现我准备了一个名为draw
的函数，它会在页面装载完毕之后执行一次（通过设置body标签的onload属性），它当然也可以在其他事件处理函数中被调用。

以上就是canvas游戏开发学习之一：初识<canvas>标签的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！

canvas 游戏开发标签 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：Canvas and Drawables 翻译第三集下一条：canvas游戏开发学习之二：绘制基本图形