js实现canvas点击绘制螺纹动画效果代码-html代码-BFW代码库

js实现canvas点击绘制螺纹动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas点击绘制螺纹动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <style>
        body {
            margin: 0px;
            overflow: hidden;
            background: rgb(255,255,255);
            background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(171,209,234,1) 100%);
            background: -webkit-gradient(radial,center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(171,209,234,1)));
            background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(171,209,234,1) 100%);
            background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(171,209,234,1) 100%);
            background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(171,209,234,1) 100%);
            background: radial-gradient(ellipse atcenter,  rgba(255,255,255,1) 0%,rgba(171,209,234,1) 100%);
            filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#abd1ea',GradientType=1 );





        }
    </style>

</head>
<body>
    <canvas id="canvas" width="1047" height="679"></canvas>

    <!--

        单击清除画布

    --><script>
        // Draw Worm
        // Ported from flash demo - http://wonderfl.net/c/9os2
        //
        function DrawWorm() {

            var canvas;
            var context;

            var width;
            var height;

            var mouse = {
                x: window.innerWidth/2,
                y: window.innerHeight
            };
            this.mouse = mouse;

            var interval;

            var vms = [];

            var MAX_NUM = 100;
            var N = 80;

            var px = window.innerWidth/2;
            var py = window.innerHeight;

            this.initialize = function() {
                canvas = document.getElementById("canvas");
                context = canvas.getContext('2d');

                width = window.innerWidth;
                height = window.innerHeight;

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

                canvas.addEventListener('touchmove', TouchMove, false);
                canvas.addEventListener('mousemove', MouseMove, false);
                canvas.addEventListener('click', MouseDown, false);

                //Set interval - Bad! - I know!
                var interval = setInterval(Draw, 20);

            }

            var Draw = function() {

                var len = vms.length;
                var i;

                //fadeScreen();

                for (i = 0; i < len; i++) {

                    var o = vms[i];

                    if (o.count < N) {
                        DrawWorm(o);
                        o.count++;
                        //This looks a tad hacky - modifying the loop from within :S
                    } else {
                        len--;
                        vms.splice(i, 1);
                        i--;
                    }
                }

                Che.........完整代码请登录后点击上方下载按钮下载查看