一、创建canvas

1 <body>
2     <!-- 创建一个canvas画布 -->
3     <canvas id = "can" width = "800" height = "600">Hello Canvas</canvas>
4 </body>

注意：

1.默认情况下创建的canvas在浏览器中是看不到的，但是如果浏览器不支持canvas，那么就会显示Hello Canvas

2.canvas元素比较特殊，咱们一般不使用css来指定它的宽高，而是直接在标签中指定。默认宽为300px，高为150px

二、canvas中的坐标

对于canvas来说，坐标系的原点在左上角，水平向右为x轴正方向，竖直向下为y轴正方向

 

 三、获取canvas环境上下文

在使用canvas的时候，首先要得到canvas的环境上下文，有了canvas的环境上下文才能够对canvas进行操作。

获取canvas上下文的方法：

1     <script>
2         var context = canvasElement.getContext("2d");    // 获取canvas的环境上下文
3     </script>

canvasElement.getContext("2d");　　// 获取的是2d图像的操作，如果想要进行3d操作可以将2d换为webgl

四、绘制线条

步骤：

1.首先需要获取canvas元素的标签

document.getElementById()

2.获取canvas的环境上下文

canvasElement.getContext("2d")

3.指定绘图模式与绘图样式

4.指定线宽

5.开始绘图

 1 <script>
 2     var can = document.getElementById("can");
 3     var context = can.getContext("2d");    // 获取canvas的环境上下文    
 4     var width = can.width,
 5         height = can.height;
 6     context.moveTo(0, 0);    // 确定坐标系的坐标原点
 7 
 8     context.lineTo(width, height);
 9     context.lineWidth = 6;
10     context.strokeStyle = "red";
11     context.stroke();    // 开始绘图
12 </script>

绘制之后的效果如图所示：