html5 canvas基本使用

canvas画布

什么是canvas
元素用于图形的绘制通过脚本（通常javascript）来完成，canvas标签只是图形容器
canvas是标签，画布是canvas的一个属性
我们在绘制之前，都需要通过标签来获取到画布，在听过画布来调用绘制的方法
var ig = cc.getContext(“2d”);

绘制流程

1. 开始绘制 (落笔)

ig.beginPath();

2.设置起点

ig.moveTo(30,30);

3.设置终点

ig.lineTo(30,230);
ig.lineTo(230,230);

// 可选(根据当前需求来看)
// 可以将最后一个终点和起点 相连接
ig.closePath();

4.根据 设置的点，来连接

ig.lineWidth = 8;  // 设置线宽
ig.strokeStyle = "blue"; // 设置连接线的颜色
ig.stroke();  //连接
ig.restore(); //加载保存过的样式

注意：canvas标签中的宽高必须写在canvas标签中。

画圆arc

参数：

1. 在canvas中 x轴上的位置
2. 在canvas中 y轴上的位置
3. 半径
4. 开始角度 Math.PI 约等于 180°
5. 结束角度
6. 是否逆时针绘制 可选默认顺

    ctx.arc(150,100,100,0*Math.PI,Math.PI/180*180);
    ctx.strokeStyle = "green";
    ctx.lineWidth = 1;
    ctx.closePath();
    ctx.fillStyle = "red";
//  ctx.fill();
    ctx.stroke();

canvas画布的一些方法和属性详清W3C
https://www.w3school.com.cn/tags/html_ref_canvas.asp