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);
                obj.p2x = (w * mtx.c + mtx.tx);

                obj.c2y = (w * mtx.d + mtx.ty);
                obj.p2y = (w * mtx.d + mtx.ty);

                obj.vmt = mtx;
                obj.tmt = tmt;

                obj.r = angle;
                obj.w = len/20;
                obj.count = 0;

                vms.push(obj);

                if (vms.length > MAX_NUM) {
                    vms.shift();
                }
            }

            //Not sure why they do this kinda thing in flash.
            var Worm = function() {
                this.c1x = null;
                this.c1y = null;
                this.c2x = null;
                this.c2y = null;
                this.p1x = null;
                this.p1y = null;
                this.p2x = null;
                this.p2y = null;

                this.w = null;
                this.r = null;

                this.count = null;
                this.vmt = null;
                this.tmt = null;

            }

            var fadeScreen = function() {
                context.fillStyle = 'rgba(255, 255, 255, 0.02)';
                context.beginPath();
                context.rect(0, 0, width, height);
                context.closePath();
                context.fill();
            }

            //Clear the screen,
            var MouseDown = function(e) {
                e.preventDefault();
                canvas.width = canvas.width;
                vms = [];
            }

            var MouseMove = function(e) {
                mouse.x = e.layerX - canvas.offsetLeft;
                mouse.y = e.layerY - canvas.offsetTop;
            }

            var TouchMove = function(e) {
                e.preventDefault();
                mouse.x = e.targetTouches[0].pageX - canvas.offsetLeft;
                mouse.y = e.targetTouches[0].pageY - canvas.offsetTop;
            }

            //Returns Magnitude
            var Magnitude = function(x, y) {
                return Math.sqrt((x * x) + (y * y));
            }

        }

        //Hacked up matrix, borrowed from easel.js -- thanks grant!
        //
        // -- If you are forking this, then you will want to play with the code above this line.
        // -- Unless you are totally nuts!
        //
        (function(window) {


            var Matrix2D = function(a, b, c, d, tx, ty) {
                this.initialize(a, b, c, d, tx, ty);
            }
            var p = Matrix2D.prototype;

            // static public properties:

            Matrix2D.identity = null; // set at bottom of class definition.

            Matrix2D.DEG_TO_RAD = Math.PI/180;


            p.a = 1;

            p.b = 0;

            p.c = 0;

            p.d = 1;

            p.tx = 0;

            p.ty = 0;

            p.alpha = 1;

            p.shadow = null;

            p.compositeOperation = null;

            p.initialize = function(a, b, c, d, tx, ty) {
                if (a != null) {
                    this.a = a;
                }
                this.b = b || 0;
                this.c = c || 0;
                if (d != null) {
                    this.d = d;
                }
                this.........完整代码请登录后点击上方下载按钮下载查看