什么是Canvas？

图形开发canvashtml5

Canvas 是一个非常强大的工具，它提供了在网页上绘制图形的能力。Canvas 实际上是一个 HTML5 元素，允许你在网页上使用 JavaScript 来绘制图形、图像、文字等。

Canvas 的工作原理是通过 JavaScript 代码来绘制图形。你可以使用 Canvas API 提供的各种方法来绘制线条、形状、文本、图像等。Canvas 还支持各种图形变换和动画效果，使得你可以创建出非常复杂和动态的视觉效果。

Canvas 的一个重要特点是它是一个 2D 渲染上下文，这意味着你可以使用它来绘制二维图形。虽然 Canvas 不直接支持 3D 渲染，但你可以通过一些技巧和扩展来实现一些简单的 3D 效果。

Canvas 的另一个优点是它非常灵活，可以与 HTML 和 CSS 一起使用来创建复杂的网页布局和界面。你还可以使用 Canvas 来加载外部图像和数据，并将其绘制到网页上。

总的来说，Canvas 是一个非常强大和灵活的工具，它为网页开发者提供了一种创建复杂和动态视觉效果的能力。

例如绘制贝塞尔曲线：

运行效果

示例源代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>

<head>
    <title>绘制曲线和路径(quadraticCurveTo)</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="图形系统开发实战:基础篇 示例">
    <meta name="author" content="hjq">
    <meta name="keywords" content="canvas,ladder,javascript,图形">
    <script src="/examples/canvas-qa/canvas_1a/js/helper.js"></script>
</head>

<body style="overflow: hidden; margin:10px;">
    <canvas id="canvas" width="500" height="300" style="border:solid 1px #CCCCCC;"></canvas>
</body>
<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d');

    let minX = 50;
    let maxX = 450;
    let x = minX;
    let toLeft = false;

    function loopDraw() {
        if(x > maxX || x < minX) toLeft = ! toLeft;
        if(toLeft){
            x -= 2;
        } else {
            x += 2;
        }
        draw({ x: x, y: 20 }, { x: (maxX - x + 50), y: 280 })
    }

    window.requestAnimationFrame(loopDraw);

    function draw(ctrlPoint1, ctrlPoint2) {

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制背景网格线
        drawGrid('lightgray', 10, 10);

        ctx.save();
        ctx.lineWidth = 4;

        ctx.beginPath();
        // 红色曲线
        ctx.moveTo(50, 150)
        ctx.quadraticCurveTo(ctrlPoint1.x, ctrlPoint1.y, 250, 150)
        ctx.strokeStyle = "red";
        ctx.stroke();

        // 蓝色曲线
        ctx.beginPath();
        ctx.moveTo(250, 150)
        ctx.quadraticCurveTo(ctrlPoint2.x, ctrlPoint2.y, 450, 150)
        ctx.strokeStyle = "blue";
        ctx.stroke();
        ctx.restore();

        // 辅助坐标点信息
        ctx.save();        
        ctx.beginPath();
        ctx.arc(50, 150, 8, 0, Math.PI * 2);
        ctx.moveTo(250, 150);
        ctx.arc(250, 150, 8, 0, Math.PI * 2);
        ctx.moveTo(450, 150);
        ctx.arc(450, 150, 8, 0, Math.PI * 2);
        ctx.fillStyle = "#5C35FF";
        ctx.fill();

        // 辅助控制点信息
        ctx.beginPath();
        ctx.arc(ctrlPoint1.x, ctrlPoint1.y, 8, 0, Math.PI * 2);
        ctx.moveTo(350, 280);
        ctx.arc(ctrlPoint2.x, ctrlPoint2.y, 8, 0, Math.PI * 2);
        ctx.fillStyle = "#A2A2A2";
        ctx.fill();

        // 辅助线信息
        ctx.beginPath();
        ctx.moveTo(50, 150);
        ctx.lineTo(ctrlPoint1.x, ctrlPoint1.y);
        ctx.lineTo(250, 150);
        ctx.lineTo(ctrlPoint2.x, ctrlPoint2.y);
        ctx.lineTo(450, 150);
        ctx.setLineDash([4, 4]);
        ctx.strokeStyle = "#A2A2A2";
        ctx.stroke();
        ctx.restore();

        // 动画
        window.requestAnimationFrame(loopDraw);
    }    
</script>

</html>

尝试一下 »

上一篇：如何在HTML中插入图片？

下一篇：长尾效果Canvas动画案例分享