Canvas入门（二）Canvas图形

二、Canvas图形

1.栅格

在我们开始画图之前，我们需要了解一下画布栅格（canvas grid）以及坐标空间。如下图所示，canvas 元素默认被网格所覆盖。通常来说网格中的一个单元相当于 canvas 元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素（坐标为（x,y））。在课程的最后我们会平移原点到不同的坐标上，旋转网格以及缩放。现在我们还是使用原来的设置。

2.绘制矩形

2.1 绘制矩形方法

canvas 提供了三种方法绘制矩形：

js 复制代码

//绘制填充矩形方法 fillRect(x, y, width, height)

js 复制代码

//绘制描边矩形 strokeRect(x, y, width, height)

js 复制代码

//绘制清理矩形方法 clearRect(x, y, width, height)

上面提供的方法之中每一个都包含了相同的参数。x 与 y 指定了在 canvas 画布上所绘制的矩形的左上角（相对于原点）的坐标。width 和 height 设置矩形的尺寸。

2.2 矩形例子

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>矩形</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        
        #canvas {
            background: antiquewhite;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        //画笔
        const ctx = canvas.getContext('2d');

        //描边宽度
        ctx.lineWidth = 20;

        //描边颜色
        ctx.strokeStyle = 'red';

        //填充矩形方法 fillRect(x, y, w, h);
        ctx.fillRect(200, 100, 400, 200);

        //描边矩形 strokeRect(x, y, w, h)
        ctx.strokeRect(200, 100, 400, 200);

        //描边线
        ctx.lineWidth = 3;
        ctx.strokeStyle = '#000';
        ctx.strokeRect(200, 100, 400, 200);

        //清理矩形方法 clearRect(x, y, w, h)
        // ctx.clearRect(200, 100, 400, 200);
    </script>
</body>

</html>

该例子输出如下图所示：

3.绘制路径

3.1 绘制路径的步骤

首先，你需要创建路径起始点。
然后你使用画图命令去画出路径。
之后你把路径封闭。
一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

以下是所要用到的函数：

js 复制代码

beginPath()

新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
*

js 复制代码

closePath()

闭合路径之后图形绘制命令又重新指向到上下文中。
*

js 复制代码

stroke()

通过线条来绘制图形轮廓。
*

js 复制代码

fill()

通过填充路径的内容区域生成实心的图形。

3.2 绘制三角形

js 复制代码

/*绘制三角形（直线）：lineTo(x,y); */
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(400, 100);
ctx.lineTo(400, 300);
ctx.closePath();
ctx.stroke();
ctx.fill();

3.3 绘制圆弧与切线圆弧

js 复制代码

/* 圆弧 arc(x,y,半径，开始弧度，结束弧度，方向)*/
ctx.beginPath();
ctx.arc(400, 400, 200, 0, Math.PI * 3 / 2);
ctx.moveTo(600, 600);
ctx.arc(400, 600, 200, 0, Math.PI * 3 / 2);
ctx.stroke();

/*切线圆弧：arcTo(x1,y1,x2,y2,半径)*/
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(400, 100);
ctx.lineTo(400, 300);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.arcTo(400, 100, 400, 300, 100);
ctx.stroke();

3.4 绘制贝塞尔曲线

js 复制代码

/*二次贝塞尔曲线：quadraCurveTo(cpx1,cpy1,x,y)*/
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(400, 100);
ctx.lineTo(400, 400);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.quadraticCurveTo(400, 100, 400, 400);
ctx.stroke();


/*三次贝塞尔曲线：bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)*/
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(400, 100);
ctx.lineTo(400, 400);
ctx.lineTo(700, 400);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.bezierCurveTo(400, 0, 400, 400, 700, 400);
ctx.stroke();

3.5 绘制矩形

js 复制代码

ctx.beginPath();
ctx.rect(100, 100, 400, 200);
ctx.rect(100, 400, 400, 200);
ctx.stroke();

3.6 案例1-机器人

机器人设计图如下：

绘制机器人整体代码：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机器人</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        #canvas {
            background: antiquewhite;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        //画布
        const canvas = document.getElementById('canvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        //画笔
        const ctx = canvas.getContext('2d');

        //颜色
        //填充色
        ctx.fillStyle = 'red';

        //画笔宽度
        ctx.lineWidth = 40;

        //面部(填充矩形)
        //填充方法 fillRect(x, y, w, h);
        ctx.fillRect(50, 250, 400, 200);

        //面部轮廓()
        //填充方法 strokeRect(x, y, w, h);
        ctx.strokeRect(50, 250, 400, 200);

        //眼罩
        //填充方法 clearRect(x, y, w, h);
        ctx.clearRect(50, 300, 400, 60);

        //嘴巴
        //直线：lineTo(x, y);
        ctx.beginPath();
        ctx.moveTo(150, 400);
        ctx.lineTo(350, 400);
        ctx.stroke();

        //眼睛
        //圆弧arc(x,y,半径，开始弧度，结束弧度，方向)

        //左眼
        ctx.beginPath();
        ctx.arc(150, 330, 20, 0, Math.PI * 2);

        //右眼
        ctx.moveTo(350 - 20, 340)
        ctx.arc(350, 340, 20, Math.PI, 0);
        ctx.fill();

        //天线
        // bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)
        //左天线
        ctx.beginPath();
        ctx.moveTo(50, 50);
        ctx.bezierCurveTo(150, 50, 150, 250, 250, 250);
        //右天线
        ctx.moveTo(450, 50);
        ctx.bezierCurveTo(350, 50, 350, 250, 250, 250);
        ctx.stroke();

    </script>
</body>

</html>

3.7 案例2-水滴

相较于上一个机器人的简单拼凑，下图这个水滴是对图形的入微级操作，因为它是用多个图形拼成了一个子路径。

绘制水滴完整代码

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>水滴</title>
    <style>
        html {
            height: 100%;
            overflow: hidden
        }
        
        body {
            height: 100%;
            margin: 0;
        }
        
        #canvas {
            background: antiquewhite;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        //canvas充满窗口
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        //画笔
        const ctx = canvas.getContext('2d');

        /*
        三次贝塞尔曲线：bezierCurverTo(cpx1,cpy1,cpx2,cpy2,x,y)
        圆弧：arc(x,y,半径，开始弧度，结束弧度，方向)
        */
        ctx.fillStyle = '#00acec';

        //位移画布
        ctx.translate(canvas.width / 2, canvas.height / 2);

        //开始新路径
        ctx.beginPath();

        //指定起点，建立子路径
        ctx.moveTo(0, 0);

        //绘制二次贝塞尔曲线
        ctx.quadraticCurveTo(50, -50, 50, -100);

        //绘制圆弧
        ctx.arc(
            0, -100,
            50,
            0, Math.PI,
            true
        );

        //绘制二次贝塞尔曲线
        ctx.quadraticCurveTo(-50, -50,
            0, 0
        );

        //显示路径
        ctx.stroke();
        ctx.fill();
    </script>
</body>

</html>