JavaScript 笔记（十一）：Canvas

JavaScript 笔记（十一）：Canvas

介绍

canvas 标签是 HTML5 新增的标签，可以使用 JavaScript 在此标签上绘制各种图形，canvas 相应的 DOM 元素有绘制路径、矩形、圆形、字符以及图片的方法，如下是绘制直线的一个示例：

<style>
    * {
     
        margin: 0;
        padding: 0;
    }

    canvas {
     
        display: block;
        border: 1px solid black;
        box-shadow: 0 0 10px black;
        margin: 100px auto;
    }
</style>
<canvas></canvas>   <!-- 1. 创建 canvas 元素 -->
<script>
    /* 2. DOM 元素 */
    let oCanvas = document.querySelector("canvas");
    /* 3. 绘图工具 */
    let ctx = oCanvas.getContext("2d");
    /* 4. 绘图 */
    ctx.moveTo(50, 50); // 4.1 起始点
    ctx.lineTo(80, 50); // 4.2 终点
    ctx.stroke();       // 4.3 相连始末
</script>

canvas 标签默认是行内块级元素，且有默认的宽度（300px）以及高度（150px），此外，必须注意如下内容：

• 不能通过 CSS 修改 canvas 元素的宽高（破坏内容），必须 canvas 标签的行内属性（width / height）
• 默认情况下，canvas 标签中线条为 1px、黑色，而在实际情况下，默认将线条的中心点与像素的底部对齐，从而导致线条为 2px、灰色

线条

在 canvas 中绘制线条时，可以设置线条的宽度、颜色以及样式，示例如下：

let oCanvas = document.querySelector("canvas");
let ctx = oCanvas.getContext("2d");
ctx.moveTo(50, 50);
ctx.lineTo(80, 50);
ctx.lineWidth = 10; // 线条宽度
ctx.strokeStyle = "orangered";  // 线条颜色
ctx.lineCap = "round";  // 线条样式
ctx.stroke();

在上述示例中，lineCap 属性的含义是在线条的两侧额外绘制图形、取值分别为 butt（默认）、round 和 square

如果使用 canvas 绘制若干线条，可以再次调用 moveTo、lineTo 以及 stroke 方法即可，示例如下：

let oCanvas = document.querySelector("canvas");
let ctx = oCanvas.getContext("2d");

ctx.moveTo(50, 50);
ctx.lineTo(80, 50);
ctx.stroke();

ctx.moveTo(50, 100);
ctx.lineTo(80, 100);
ctx.stroke();

绘制线条时，如果自定义了线条宽度、颜色或样式，那么将影响之后的所有线条，示例如下：

let oCanvas = document.querySelector("canvas");
let ctx = oCanvas.getContext("2d");
ctx.moveTo(50, 50);
ctx.lineTo(80, 50);
ctx.lineWidth = 10;
ctx.strokeStyle = "orangered";
ctx.lineCap = "round";
ctx.stroke();

ctx.moveTo(50, 100);
ctx.lineTo(80, 100);
ctx.stroke();

如果想要避免此类情况，那么必须：

1. 通过绘图工具调用 beginPath 方法，以开启一个新路径
2. 调用 stroke 方法之前重新设置线条样式，否则依旧相互影响

示例如下：

let oCanvas = document.querySelector("canvas");
let ctx = oCanvas.getContext("2d");

ctx.moveTo(50, 50);
ctx.lineTo(80, 50);
ctx.lineWidth = 10;
ctx.strokeStyle = "orangered";
ctx.lineCap = "round";
ctx.stroke();

ctx.beginPath();    // 开启一个新路径
ctx.moveTo(50, 100);
ctx.lineTo(80, 100);
ctx.lineWidth = 5;
ctx.strokeStyle = "yellowgreen";
ctx.stroke();

绘制图形

以下示例尝试绘制一个矩形：

<canvas width="500" height="500"></canvas>
<script>
    let oCanvas = document.querySelector("canvas");
    let ctx = oCanvas.getContext("2d");

    ctx.moveTo(100, 50);
    ctx.lineTo(200, 50);
    ctx.lineTo(200, 100);
    ctx.lineTo(100, 100);
    ctx.stroke();
</script>

默认情况下，不能将矩形闭合，此时可以通过绘图工具调用 closePath 方法，示例如下：、

let oCanvas = document.querySelector("canvas");
let ctx = oCanvas.