(九) JavaScript-Canvas 雪花飘

JavaScript , 评论

JavaScript 是前端核心， 掌握这门语言是步入前端高手行列必经之路，噢，别忘了还有TypeScript, 学习它还需要OOP知识， 底层的浏览器原理、HTTP协议也必不可少， 此系列文章记录使用JavaScript和Canvas进行游戏开发, 有游戏才有趣!!!

旋转的图片

(九) JavaScript-Canvas 雪花飘

上一篇中让图片转了起来， 本篇自己设计一张图形，然后让图形转动； 在网页代码中要注意，设计了两个Canvas，两个Canvas的位置在CSS中有具体的描述。其中第一个画布准备画一个图形，然后再将图形整体画到第二个画布上

1. 设计网页代码

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
<!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>
    <style>
        #canvas1 {		
            position:absolute;
            top: 0;
            left: 0;
            background-color: rgb(11, 4, 4);
            z-index: 11;
        }
        #canvas2 {		
            position:absolute;
            top: 0;
            left: 0;
            background: rgb(11, 4, 4);
            z-index: -11;
        }
    </style>
</head>
<body>
    <canvas id="canvas1"></canvas>
    <canvas id="canvas2"></canvas>

    <script>
        /** @type {HTMLCanvasElement} */
        //第一个画布
        const canvas1 = document.getElementById('canvas1')
        const ctx1 = canvas1.getContext('2d')
        canvas1.width = 200
        canvas1.height= 200
        //画布设置
        ctx1.lineCap = 'round';
        //阴影设置
        ctx1.shadowColor = 'rgba(0,0,0,0.7)';
        ctx1.shadowOffsetX = 10;
        ctx1.shadowOffsetY = 5;
        ctx1.shadowBlur = 10;
        
        //第二个画布
        const canvas2 = document.getElementById('canvas2');
        const ctx2 = canvas2.getContext('2d');
        canvas2.width = window.innerWidth;
        canvas2.height = window.innerHeight;
        
        
    </script>
</body>
</html>

1. 先画几根线

  • 定义一个画线函数

  • 设定线从坐标(0,0) 开始，线长100, 线宽4, 颜色orange

    1
    2
    3
    4
    5
    6
    7
    8
    function drawLine() {
        ctx1.beginPath() 
        ctx1.moveTo(0, 0)
        ctx1.lineTo(100, 0)
        ctx1.lineWidth=4
        ctx1.strokeStyle='orange'
        ctx1.stroke()
    }

2. 定义一个draw函数，绕中心点画多根线

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
function drawLine() {
    ctx1.beginPath() 
    ctx1.moveTo(0, 0)
    ctx1.lineTo(100, 0)
    ctx1.lineWidth=4
    ctx1.strokeStyle='orange'
    ctx1.stroke()
}


function draw() {
    //注意save方法
    ctx1.save()
    //将原点平移到中心位置
    ctx1.translate( canvas1.width/2,  canvas1.height/2);
    for (let i = 0; i < 12; i++){ //线条数量
        //旋转
        ctx1.rotate((Math.PI * 2)/12);//旋转度数 2PI 除以 线条数目
        drawLine();//画线
    }
    //恢复状态
    ctx1.restore()
}

draw() //调用绘图函数

绘图结果

3. 将绘制在Canvas1上面的图形转换为图片

1
2
const image = new Image()
image.src = canvas1.toDataURL();

4. 图片旋转

  • 注意一定要注册一个事件，图片加载完成后才能进入动画
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
image.onload = function(){
    let angle = 1
    function animate() {
        //先清空，再平移
        ctx2.clearRect(0,0,canvas2.width, canvas2.height)
        ctx2.save() 
        //将图片移到canvas2的中心位置
        ctx2.translate(canvas2.width/2-100, canvas2.height/2-100) 
        //旋转角度
        ctx2.rotate(angle * Math.PI/360)
        //画图
        ctx2.drawImage(image, 0-100, 0-100, 200, 200)
        ctx2.restore();
        angle += 4 //更新角度
        window.requestAnimationFrame(animate)
    }
    animate()
}

5. 完整代码如下

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
<!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>
    <style>

        

        #canvas1 {		
            position:absolute;
            top: 0;
            left: 0;
            background-color: rgb(11, 4, 4);
            z-index: 11;
        }
        #canvas2 {		
            position:absolute;
            top: 0;
            left: 0;
            background: rgb(11, 4, 4);
            z-index: -11;
        }
    </style>
</head>
<body>
    <canvas id="canvas1"></canvas>
    <canvas id="canvas2"></canvas>

    <script>
        /** @type {HTMLCanvasElement} */
        const canvas1 = document.getElementById('canvas1')
        const ctx1 = canvas1.getContext('2d')
        canvas1.width = 200
        canvas1.height= 200
        //画布设置
        ctx1.lineCap = 'round';
        //阴影设置
        ctx1.shadowColor = 'rgba(0,0,0,0.7)';
        ctx1.shadowOffsetX = 10;
        ctx1.shadowOffsetY = 5;
        ctx1.shadowBlur = 10;


        //第二个画布
        const canvas2 = document.getElementById('canvas2');
        const ctx2 = canvas2.getContext('2d');
        canvas2.width = window.innerWidth;
        canvas2.height = window.innerHeight;
        
        function drawLine() {
            ctx1.beginPath() 
            ctx1.moveTo(0,0)
            ctx1.lineTo(100, 0)
            ctx1.lineWidth=4
            ctx1.strokeStyle='orange'
            ctx1.stroke()
        }

        function draw() {
            ctx1.save()
            ctx1.translate( canvas1.width/2,  canvas1.height/2);
            for (let i = 0; i < 12; i++){ 
                ctx1.rotate((Math.PI * 2)/12); 
                drawLine(); 
            }
            ctx1.restore()
        }

        draw()

        const image = new Image()
        image.src = canvas1.toDataURL();

        image.onload = function(){
            let angle = 1

            function animate() {

                ctx2.clearRect(0,0,canvas2.width, canvas2.height)
                ctx2.save() 
                
                ctx2.translate(canvas2.width/2-100, canvas2.height/2-100)               
                ctx2.rotate(angle * Math.PI/360)
                ctx2.drawImage(image, 0-100, 0-100, 200, 200)
                ctx2.restore();
                angle+=4

                window.requestAnimationFrame(animate)
            }
            animate()
        }
 
 
    </script>
</body>
</html>

多一些图形旋转，每个图形的大小可自由设置，垂直飘落, 后面章节再完善

哼哈七龙岛主架构师 & 开发者 & 技术分享

个人简介。