02. 绘制基本图形和字体

于2022-12-29 17:27:45发布

线段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="500" height="500" style="background:#000;"></canvas>
    <script>
        const paint = document.querySelector('canvas').getContext('2d');
        paint.lineWidth = 4; // 线段的粗细
        paint.lineCap = 'round'; // 线段的样式
        paint.strokeStyle = 'red'; // 线段的颜色
        paint.moveTo(50, 50);
        paint.lineTo(150, 50);
        paint.stroke();
    </script>
</body>
</html>

线段的样式有以下三种

矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="500" height="500" style="background:#000;"></canvas>
    <script>
        const paint = document.querySelector('canvas').getContext('2d');
        paint.lineWidth = 4; 
        paint.strokeStyle = 'red';
        paint.strokeRect(50,50,100,100); // 绘制矩形
    </script>
</body>
</html>

若想绘制实心的矩形，则把代码中含有stroke的改为fill即可。修改上面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="500" height="500" style="background:#000;"></canvas>
    <script>
        const paint = document.querySelector('canvas').getContext('2d');
        paint.lineWidth = 4; 
        paint.fillStyle = 'red'; // 这里
        paint.fillRect(50,50,100,100); // 这里
    </script>
</body>
</html>

tips

只要想绘制实心的图形就用fill，否则用stroke

圆形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="500" height="500" style="background:#000;"></canvas>
    <script>
        const paint = document.querySelector('canvas').getContext('2d');
        paint.fillStyle = 'red';
        /*
            圆心的x坐标
            圆心的y坐标
            圆形的半径
            圆形的起始角度	单位为弧度
            圆形的结束角度	单位为弧度
            顺时针绘制还是逆时针绘制圆形
        */
        paint.arc(150, 150, 100, 0, 360 * Math.PI / 180, true);
        paint.fill();
    </script>
</body>
</html>

字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="500" height="500" style="background:#000;"></canvas>
    <script>
        const paint = document.querySelector('canvas').getContext('2d');
        paint.fillStyle = 'red';
        paint.font = 'italic bold 30px Arial'; // 斜体 加粗 字体大小 字体
        paint.fillText('canvas', 0, 30); // 绘制的字体 x坐标 y坐标
    </script>
</body>
</html>

需要注意，这里字体的y坐标不是0，而是30。这是因为canvas在绘制字体的时候，锚点是设置在字体的左下角，如下图：