随机平移的星星Canvas来帮你实现

图形开发canvashtml5

在图形开发中，有时候我们需要绘制一个复杂的形状，并且要将它放在不同的位置。为了不让自己陷入复杂的形状内部实现逻辑，我们可以使用translate()方法来改变坐标系。这样，绘制形状的过程就会变得简单许多。下面是一个示例，展示了如何使用这种方法在画布上绘制多颗星星，效果看起来真的很棒！

示例效果与源代码：

运行效果

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
<!DOCTYPE html>
<html>

<head>
    <title>变形操作(translate)</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_1b/js/helper.js"></script>
</head>

<body style="overflow: hidden; margin:10px;">
    <div style="display: inline-block;">
        <canvas id="canvas" width="800" height="400" style="border:solid 1px #CCCCCC;"></canvas>
    </div>
</body>
<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');

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

    // 绘制提示文本
    ctx.save();
    ctx.textBaseline = "bottom";
    ctx.font = "30px Verdana";
    ctx.fillStyle = "gold";
    ctx.fillText("随机平移的星星", 550, 100);
    ctx.restore();

    // 随机生成n个星星
    let num = 18;
    for (let i = 0; i < num; i++) {
        ctx.save();
        let x = getRandomNum(10, 750);
        let y = getRandomNum(10, 350);
        ctx.translate(x, y);
        drawStar();
        ctx.restore();
    }

</script>

</html>

尝试一下 »

在执行变形操作之前使用save()保存画布上下文状态，在执行变形操作并且绘制图形后，使用restore()恢复画布上下文状态。

上一篇：HTML与HTML5有什么区别？

下一篇：3个非常有趣的HTML5Canvas动画