html|canvas的基础用法🔥🔥

1. 创建

    <!-- 创建一个画布 -->
    <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>

2. 矩形

    var c=document.getElementById("myCanvas");
    //获取画布对象，getContext
    var ctx = c.getContext("2d");
    //填充颜色
    ctx.fillStyle = "FF0000";
    // 绘制矩形（x,y,width,height）
    ctx.fillRect(0,0,150,75);

![](https://secure2.wostatic.cn/static/wHKQUgqY2XxRpmGKPLL2bx/image.png)

3. 线条

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    //线条开始的坐标
    ctx.moveTo(0,0);
    // 线条结束的坐标
    ctx.lineTo(200,100);
    // 笔画绘制
    ctx.stroke();

![](https://secure2.wostatic.cn/static/bFAZmjYZuTpZhyT6jquZ5b/image.png)

4. 圆形

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    // (x,y,半径，起始角，结束角)
    ctx.arc(95, 50, 40, 0, 2 * Math.PI);
    ctx.stroke();

![](https://secure2.wostatic.cn/static/qPKH7pk1rKLn5yk4dCrRNA/image.png)

5. 文字

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.font = "30px Arial";
    ctx.fillText("hello world", 10, 50);

![](https://secure2.wostatic.cn/static/mvgJi6Yu2GF9HwEbjPZ3Fp/image.png)

6. 空心文字

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.font = "30px Arial";
    ctx.strokeText("hello world", 10, 50);

![](https://secure2.wostatic.cn/static/odpVeBxY7sUoXyHMrspjjV/image.png)

7. 三角形

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    //开始一条路径
    ctx.beginPath();
    // 起点
    ctx.moveTo(0, 0);
    // 终点 下一个起点
    ctx.lineTo(50, 50);
    //    终点
    ctx.lineTo(100, 0);
    // 关闭一条路径
    ctx.closePath();
    // 绘制
    ctx.stroke();

![](https://secure2.wostatic.cn/static/8PBfoZM3m4Zq1h8JcLnWtx/image.png)