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

代码语言：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--;
                    }
                }

                Check();
            }

            //Takes a worm (obj) param
            var DrawWorm = function (obj) {

                if (Math.random() > 0.9) {
                    obj.tmt.rotate(-obj.r * 2);
                    obj.r *= -1;
                }

                //Prepend is just concat -- right?

                obj.vmt.prependMatrix(obj.tmt);

                var cc1x = -obj.w * obj.vmt.c + obj.vmt.tx;
                var cc1y = -obj.w * obj.vmt.d + obj.vmt.ty;

                var pp1x = (obj.c1x + cc1x) / 2;
                var pp1y = (obj.c1y + cc1y) / 2;

                var cc2x = obj.w * obj.vmt.c + obj.vmt.tx;
                var cc2y = obj.w * obj.vmt.d + obj.vmt.ty;

                var pp2x = (obj.c2x + cc2x) / 2;
                var pp2y = (obj.c2y + cc2y) / 2;

                context.fillStyle = '#000000';
                context.strokeStyle = '#000000';
                context.beginPath();

                context.moveTo(obj.p1x, obj.p1y);
                context.quadraticCurveTo(obj.c1x, obj.c1y, pp1x, pp1y);

                context.lineTo(pp2x, pp2y);

                context.quadraticCurveTo(obj.c2x, obj.c2y, obj.p2x, obj.p2y);

                //context.stroke();
                context.closePath();
                context.fill();


                obj.c1x = cc1x;
                obj.c1y = cc1y;
                obj.p1x = pp1x;
                obj.p1y = pp1y;
                obj.c2x = cc2x;
                obj.c2y = cc2y;
                obj.p2x = pp2x;
                obj.p2y = pp2y;
            }

            var Check = function() {

                var x0 = mouse.x;
                var y0 = mouse.y;

                var vx = x0 - px;
                var vy = y0 - py;

                var len = Math.min(Magnitude(vx, vy), 50);

                if (len < 10) {
                    return;
                }

                var matrix = new Matrix2D();

                matrix.rotate((Math.atan2(vy, vx)));

                matrix.translate(x0, y0);

                createWorm(matrix, len);

                context.beginPath();
                context.strokeStyle = '#000000';
                context.moveTo(px, py);
                context.lineTo(x0, y0);
                context.stroke();
                context.closePath();

                px = x0;
                py = y0;

                //More logic here for afterwards?
            }

            var createWorm = function(mtx, len) {

                var angle = Math.random() * (Math.PI/6 - Math.PI/64) + Math.PI/64;

                if (Math.random() > 0.5) {
                    angle *= -1;
                }


                var tmt = new Matrix2D();
                tmt.scale(0.95, 0.95);
                tmt.rotate(angle);
                tmt.translate(len, 0);

                var w = 0.5;

                var obj = new Worm();

                obj.c1x = (-w * mtx.c + mtx.tx);
                obj.p1x = (-w * mtx.c + mtx.tx);

                obj.c1y = (-w * mtx.d + mtx.ty);
                obj.p1y = (-w * mtx.d + mtx.ty);

                obj.c2x = (w * mtx.c + mtx.tx);
                .........完整代码请登录后点击上方下载按钮下载查看