初探HTML5——canvas元素（一）

作者: Sugar_Ye | 来源:发表于2017-10-22 16:12 被阅读0次

初探HTML5——canvas元素（一）
Web之旅—— Canvas初探
如何在h5网页添加水印
HTML5 Canvas
HTML 5 Canvas
canvas学习一
HTML5 Canvas 完整测试 - canvas 标签
初探HTML5——canvas元素（二）
初探HTML5——canvas元素（三）
初探HTML5——canvas元素（四）

canvas元素在国内被翻译成"画布"，我们暂且这么记。它是一种平面的绘图容器，使用canvas可以绘制图形、制作特效。

一、如何开始

在Web页面使用canvas元素很简单，只需要使用canvas标签即可。因为canvas本身不提供绘制能力，这部分工作委托给了JavaScript，所以需要给元素一个id方便后续获取对象。width和height属性告诉浏览器可绘制图形区域的大小（范围）。

如果不设置width和height，将不能正常显示效果。

<canvas id="canvas" width="300" height="300"></canvas>

二、如何操作

要想操作canvas首先要获取其元素，尔后获取context对象。context是HTML5内置的一个对象，可以用来绘制路径、图形、添加图像等。虽然很不喜欢叫做上下文，但是为了便于小伙伴们理解，一下还是会直接成为上下文。

       /*获取canvas对象的context（绘图上下文）*/
        var context=document.getElementById('canvas').getContext("2d");
        /*
        *等价于第一行代码
        * var canvas=document.getElementById("canvas");
        * var context =canvas.getContext("2d");
        */

三、绘制直线

在平面内两点可以确定一条直线，通过x，y坐标可以确定一点。因此绘制一条直线的前提是需要定义2组坐标即两点。敲黑板，在浏览器中坐标系统是从左上角开始（0,0）。向右是x轴的正值方向，向下是y轴正值方向。

开始绘制直线调用moveTo(x,y)方法，含义是告诉context对象在画布中(x,y)位置绘制一点作为起点。lineTo(x,y)方法是在画布中加入新的点。确定了两点之后，还需要调用stroke()方法按照路径将其绘制出来，忘记调用stroke()方法会看不到要绘制内容。

        /*准备绘制直线*/
        context.moveTo(200,200);
        context.lineTo(200,300);
        //按绘制路径顺序绘制直线
        context.stroke();

四、完整代码

在示例中为window对象绑定了onload事件，主要是让文档加载完毕后执行绘制操作。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>canvas演示</title>
    <script type="text/javascript">
      window.onload=function(){
       /*获取canvas对象的context（绘图上下文）*/
        var context=document.getElementById('canvas').getContext("2d");
        /*
        *等价于第一行代码
        * var canvas=document.getElementById("canvas");
        * var context =canvas.getContext("2d");
        */

        /*准备绘制直线*/
        context.moveTo(200,200);
        context.lineTo(200,300);
        //按绘制路径顺序绘制直线
        context.stroke();
      }
    </script>
  </head>
  <body>
     <canvas id="canvas" width="300" height="300"></canvas>
  </body>
</html>

一起浏览下效果图：