git_test/test.html at master · Pumpkinshow/git_test · GitHub

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;background:#000">
    当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>

<script>
window.onload=function(){

    var canvas = document.getElementById("canvas");


    canvas.width = 800;
    canvas.height = 800;

    var context = canvas.getContext("2d");


    draw();
    function draw(){
        context.lineWidth = 3;
        context.strokeStyle = "white";
        context.fillStyle = "yellow";
        var x,y,outerR,innerR,rot;
        for(var i=0;i<200;i++){
            x = Math.random() * (canvas.width-22) + 11;
            y = Math.random() * (canvas.height-22) + 11;
            outerR = Math.random() * 10 + 1;
            innerR = outerR/2;
            rot = Math.random() * 360;
            startPath(context,x,y,outerR,innerR,rot);
            context.fill();
            context.stroke();
        }


    }

    function startPath(cxt,x,y,outerR,innerR,rot){
        cxt.beginPath();
        for(var i=0;i<5;i++){
            cxt.lineTo(Math.cos((18 + i*72 -rot)/180 * Math.PI) * outerR + x,-Math.sin((18 + i*72 -rot)/180 * Math.PI) * outerR + y);
            cxt.lineTo(Math.cos((54 + i*72 -rot)/180 * Math.PI) * innerR + x,-Math.sin((54 + i*72 -rot)/180 * Math.PI) * innerR + y);
        }
        cxt.closePath();
    }


}
</script>
</body>
</html>