找回密码
当前位置：前端开发者 > HTML > 正文

前端H5 CANVAS随机点线视觉3D效果

2018-09-07 22:18:06 分类：HTML 阅读(154) 评论(0)

web前端开发个人博客网站 网站前端总体开发流程与设计 网站开发前端如何开发

$(function() {
    var canvasBg = new PointLine(
        ‘#canvas’,
        15,
        parseInt($(window).height()),
        parseInt($(window).width()),
    )
    canvasBg.lineColor = ‘red’
    canvasBg
        .drawLine()
        .drawPoint(15)
        .reDraw(100, 50) //.mouseMove();
})

代码片段 1

<!DOCTYPE html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title>html5-canvas制作动态点线背景</title>
    <link rel=”stylesheet” href=”http://yui.yahooapis.com/3.18.1/build/cssnormalize/cssnormalize-min.css”>
    <script src=”http://code.jquery.com/jquery-1.11.3.min.js”></script>
    <style>
        canvas {
            background: #000;
            display: block;
        }
    </style>
    <script>
        $(function () {
            var canvasBg = new PointLine(‘#canvas’, 15, parseInt($(window).height()), parseInt($(window).width()));
            canvasBg.lineColor = ‘red’;
            canvasBg.drawLine().drawPoint(15).reDraw(100, 50)//.mouseMove();
        });
        //PointLine object
        function PointLine(ele, num, height, width) {
            this.ele = $(ele);
            this.num = num ? parseInt(num) : 10;
            this.radius = 3;
            this.height = height ? parseInt(height) : 800;
            this.width = width ? parseInt(width) : 600;
            this.pointColor = ‘#fff’;
            this.lineColor = ‘#fff’;
            this.pointArr = [];
            //point Array
            var ele = this.ele, num = this.num, height = this.height, width = this.width;
            ele.get(0).height = height;
            ele.get(0).width = width;
            for (var i = 0; i < num; i++) {
                var px = Math.floor(Math.random() * (width – 1) + 1), py = Math.floor(Math.random() * (height – 1) + 1);
                (function () {
                    for (var j in this.pointArr) {
                        if (px == this.pointArr[j][0]) {
                            px = Math.floor(Math.random() * (width – 1) + 1);
                        } else {
                            return px;
                        }
                    }
                }());
                this.pointArr.push([px, py]);
            }
        }
        PointLine.prototype = {
            drawPoint: function () {
                var ele = this.ele, eleGet = ele.get(0), radius = this.radius, height = this.height, pointColor = this.pointColor, arr = this.pointArr;
                //radius value
                if (arguments.length >= 1) {
                    radius = !isNaN(parseInt(arguments[0])) ? parseInt(arguments[0]) : radius;
                    this.radius = radius;
                }
                //3D Array
                var leftArr = [], rightArr = [];
                for (var i in arr) {
                    if (arr[i][0] <= height / 2) {
                        leftArr.push(arr[i]);
                    } else {
                        rightArr.push(arr[i]);
                    }
                }
                //draw point
                if (eleGet.getContext) {
                    var leftRadius = 0, rightRadius = 0;
                    for (var i in leftArr) {
                        drawAnim(leftArr[i], leftRadius);
                        leftRadius += radius / leftArr.length / 1.2;
                    }
                    for (var i in rightArr) {
                        drawAnim(rightArr[i], rightRadius);
                        rightRadius += radius / rightArr.length / 1.2;
                    }
                }
                function drawAnim(arr, sub) {
                    var point = eleGet.getContext(‘2d’);
                    point.fillStyle = pointColor;
                    point.beginPath();
                    point.arc(arr[0], arr[1], (radius – sub), 0, 2 * Math.PI, false);
                    point.fill();
                }
                return this;
            },
            drawLine: function () {
                var eleGet = this.ele.get(0), lineColor = this.lineColor, arr = this.pointArr;
                if (eleGet.getContext) {
                    var line = eleGet.getContext(‘2d’);
                    line.strokeStyle = lineColor;
                    line.beginPath();
                    for (var i = 0; i < arr.length; i++) {
                        for (var j = 1; j < arr.length – i; j++) {
                            line.moveTo(arr[i][0], arr[i][1]);
                            line.lineTo(arr[i + j][0], arr[i + j][1]);
                        }
                    }
                    line.stroke();
                }
                return this;
            },
            reDraw: function (scope, speed) {
                if (!isNaN(scope) && !isNaN(speed)) {
                    var _this = this, eleGet = this.ele.get(0), arr = this.pointArr, newArr = arr.slice(0), aArr = [], bArr = [], step = 0;
                    var redraw = eleGet.getContext(‘2d’);
                    //变化数组
                    for (var i = -scope; i <= scope; i++) {
                        aArr.push(i);
                    }
                    aArr = aArr.concat(aArr.slice(0).reverse());
                    for (var i = scope; i >= -scope; i–) {
                        bArr.push(i);
                    }
                    bArr = bArr.concat(bArr.slice(0).reverse());
                    for (var i = 0; i < aArr.length; i++) {
                        if (aArr[i + 1] == aArr[i]) {
                            aArr.splice(i, 2, aArr[i]);
                        }
                        if (bArr[i + 1] == bArr[i]) {
                            bArr.splice(i, 2, bArr[i]);
                        }
                    };
                    aArr.splice(aArr.length – 1, 1);
                    bArr.splice(bArr.length – 1, 1);
                    //定时器
                    setInterval(function () { loop() }, speed);
                    function loop() {
                        redraw.clearRect(0, 0, _this.width, _this.height);
                        if (step < aArr.length – 1) {
                            step++;
                        } else {
                            step = 0;
                        };
                        var na = aArr[step], nb = bArr[step];
                        for (var i = 0; i < arr.length; i++) {
                            if (i % 2 == 0) {
                                arr.splice(i, 1, [newArr[i][0] + nb, newArr[i][1] + na]);
                            } else {
                                arr.splice(i, 1, [newArr[i][0] + na, newArr[i][1] + nb]);
                            }
                        }
                        _this.drawLine().drawPoint(_this.radius);
                    };
                }
                return this;
            },
            mouseMove: function () {
                var _this = this, ele = this.ele, eleGet = ele.get(0), height = this.height, width = this.width, arr = this.pointArr;
                var redraw = eleGet.getContext(‘2d’);
                ele.hover(function (ev) {
                    var mx = ev.originalEvent.x || ev.originalEvent.layerX || 0, my = ev.originalEvent.y || ev.originalEvent.layerY || 0;
                    ele.mousemove(function (e) {
                        redraw.clearRect(0, 0, width, height);
                        var mxl = e.originalEvent.x || e.originalEvent.layerX || 0, myl = e.originalEvent.y || e.originalEvent.layerY || 0;
                        for (var i in arr) {
                            arr.splice(i, 1, [arr[i][0] + mxl – mx, arr[i][1] + myl – my]);
                        }
                        _this.drawLine().drawPoint(_this.radius);
                        mx = mxl;
                        my = myl;
                    });
                }, function () {
                    ele.off(‘mousemove’);
                });
                return this;
            }
        }
    </script>
</head>
<body>
    <canvas class=”canvas” id=”canvas”>您的浏览器不支持HTML5元素，请升级您的浏览器！</canvas>
    <div id=”arr”></div>
</body>
</html>

网站前端开发步骤 网站前端开发案例欣赏 前端开发代码网站

» 本文来自：前端开发者 » 《前端H5 CANVAS随机点线视觉3D效果》
» 本文链接地址：https://www.rokub.com/5540.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论