Canvas

一、Canvas的概念

1.为什么要学 Canvas

使用 div + css 绘制三角形、五角星等图形比较困难，需要使用canvas绘图实现。
可以用 canvas 绘制复杂图形，可以做动画，处理图像、开发游戏、处理视频等等。

2.Canvas与 Svg 的异同

Canvas
- 画布元素：Canvas使用HTML5的元素创建一个绘图区域，这个区域是一个空白的矩形容器，可以通过JavaScript绘制图形。
- 绘图方式：Canvas是基于位图的，它在画布上绘制像素。你可以使用JavaScript绘制图形、图像和动画，但一旦绘制完成，你不能轻松地修改单个图形元素。
- 性能：Canvas通常更适合绘制大量动态元素，因为它可以更好地处理复杂的动画效果，但它可能需要更多的JavaScript编码。
- 适用场景：Canvas适用于游戏开发、数据可视化以及需要复杂图形处理的应用。
Svg
- XML元素：SVG是基于XML的矢量图形描述语言，使用元素创建图形，它描述了图形的结构和属性。
- 矢量图形：SVG是基于矢量的，它描述了图形的形状和属性，而不是像素。这意味着它可以无损地缩放，不会失真，因此非常适合创建响应式图形。
- 编程性：SVG可以使用JavaScript来进行交互和动画，但与Canvas相比，它更容易实现复杂的图形操作，因为图形元素是独立的且易于访问和修改。
- 适用场景：SVG适用于需要可缩放和响应式设计的图形，如图表、图标、地图和基于矢量的动画。

3.如何使用Canvas绘图

（1）初始化canvas元素与尺寸，其中不设置canvas画布大小的话会初始化为宽度为 300 像素和高度为 150 像素

html 复制代码

<canvas id="canvas" width="700" height="800"></canvas>

或使用js改变画布大小

html 复制代码

<canvas id="canvas"></canvas>

js 复制代码

//获取画布元素
const canvas = document.getElementById('canvas');
//设置尺寸
canvas.width = 300;
canvas.height = 150;

（2）通过canvas 画布获取上下文对象，也就是画笔

js 复制代码

//获取画布元素
const canvas = document.getElementById('canvas');
//画笔
//2d 画笔
const ctx = canvas.getContext('2d');
//3d画笔
// const ctx = canvas.getContext('webgl');

（3）设置画笔颜色与形状

js 复制代码

//画笔颜色
ctx.fillStyle = 'red';
//画笔形状
ctx.fillRect(
    100, 100,
    400, 200
);

（4）绘制图形

绘制一个红色的矩形完整代码如下：

html 复制代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas</title>
    <style>
        #canvas {
            background: antiquewhite;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="700" height="800"></canvas>

    <script>
        //获取画布元素
        const canvas = document.getElementById('canvas');
        //设置尺寸
        // canvas.width = 300;
        // canvas.height = 150;

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

        //画笔颜色
        ctx.fillStyle = 'red';
        //画笔形状
        ctx.fillRect(
            100, 100,
            400, 200
        );
    </script>
</body>

</html>

Canvas入门（一）Canvas的概念

Canvas

一、Canvas的概念

1.为什么要学 Canvas

2.Canvas与 Svg 的异同

3.如何使用Canvas绘图