Canvas 01

canvas元素

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

canvas元素就是一个HTML标签，默认初始化的宽度为300px高度为150px
我们可以使用css样式调整他的尺寸，但是如果CSS尺寸和画布尺寸不一致，可能会出现图像缩放，导致失真问题。（这点十分重要，涉及到绘图坐标的确认）
可以指定canvas元素的width和height参数，避免绘制出来的图像扭曲。

默认内容

我们知道canvas标签能力已经被大部分浏览器支持，但是如果存在一些不支持的浏览器厂商，我们可以定义默认内容进行填充。

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt="" />
</canvas>

只有当浏览器不支持canvas标签时，才会展示我们提供的默认内容。

标签不可以省略否则其余文档部分都会被当做是替代内容。

渲染上下文画笔（rendering context）

我们可以在canvas上提供的画布进行绘制和展示内容，其中有2D和3D的渲染上下文，本章节我们主要是讨论2D渲染上下文。

获取上下文

getContext方法获取对应的上下文对于2D渲染上下文，类型为CanvasRenderingContext2D。

var canvas = document.getElementById("tutorial");
var ctx = canvas.getContext("2d");

我们可以判断当前canvas元素是否支持getContext方法，保证代码1健壮性

var canvas = document.getElementById("tutorial");

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("tutorial");
        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="tutorial" width="150" height="150"></canvas>
  </body>
</html>

获取文档节点中canvas元素的2D渲染上下文。 onload表示在页面加载结束后就会调用执行draw回调函数。

要求我们绘制两个矩形，其中一个带有透明度并且重合。

...
const ctx = canvas.getContext("2d")
ctx.fillStyle='rgb(200,0,0)'
ctx.fillRect(10,10,50,50)

ctx.fillStyle='rgba(0,0,200,0.5)'
ctx.fillRect(30,30,50,50)

写在最后

上面主要讲解关于canvas标签的基本概念，以及使用的注意事项。我们后续文章还是围绕着我们2D渲染上下文进行我们在canvas上的图形绘制和内容展示。希望大家好好生活，健康快乐。