html+js：画布canvas

目录

canvas作用

使用方式

绘制方式

绘制线条

绘制闭合图形 

绘制圆形

---

canvas作用

        用于在网页上绘制图形(但是必须与JavaScript进行结合使用，canvas元素本身没有绘图能力，绘制工具必须在JavaScript内进行)

使用方式

        使用流程大致为：

                1.html创建画布标签，定义画布名称和画布大小

                2.JavaScript使用id获取画布

                3.JavaScript创建context对象，获取画笔

        画布标签<canvas></canvas>

<canvas id="画布名称" width="画布宽度" height="画布高度"></canvas>

        JavaScript使用id来寻找canvas元素 

var huabu=document.getElementById("画布名称");
//这里的a一般建议与画布名称相同，指代画布

         创建context对象

var huabi=huabu.getContext("2d");
//这里的huabi用以指代画笔  
//getContext("2d")对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

        创建画布，获取画笔之后，就可以进行绘制了

绘制方式

        1.确定起始点

huabi.moveTo(x,y);
//x，y指代的分别是x轴、y轴坐标，是数字格式

         注：画布上绘制坐标是从左上角(0,0)开始，以此为基准