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

前端H5 canvas星空背景连线

2018-11-25 22:32:56 分类：HTML 阅读(464) 评论(0)
前端开发 这么写文档
微众 前端开发文档
前端企业官网开发文档
web前端开发步骤文档

点

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>星空</title>
        <style>
            * {
                padding: 0;
                margin: 0;
                border: 0;
            }
            body {
                overflow: hidden;
            }
            #canvas {
                display: block;
                background: #000;
            }
        </style>
    </head>
    <body>
        <canvas id=”canvas” width=”200″ height=”200″></canvas>
        <script>
            //画圆
            var canvas = document.getElementById(‘canvas’) //获取canva画布
            var cxt = canvas.getContext(‘2d’) //设置canvas的绘画环境，相当于画笔
            cxt.fillStyle = ‘pink’ //颜色
            cxt.beginPath() //开始路径
            cxt.arc(100, 100, 10, 0, Math.PI * 2, false) //圆
            cxt.closePath() //闭合路径
            cxt.fill() //填充
        </script>
    </body>
</html>

线

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>星空</title>
        <style>
            * {
                padding: 0;
                margin: 0;
                border: 0;
            }
            body {
                overflow: hidden;
            }
            #canvas {
                display: block;
                background: #000;
            }
        </style>
    </head>
    <body>
        <canvas id=”canvas” width=”200″ height=”200″></canvas>
        <script>
            //画圆
            var canvas = document.getElementById(‘canvas’) //获取canva画布
            var cxt = canvas.getContext(‘2d’) //设置canvas的绘画环境，相当于画笔
            var color = cxt.createLinearGradient(50, 100, 100, 50)
            color.addColorStop(0, ‘#fff’)
            color.addColorStop(1, ‘#8cadf4’)
            cxt.save()
            cxt.strokeStyle = color
            cxt.beginPath()
            cxt.moveTo(50, 100) //起点
            cxt.lineTo(100, 50) //终点
            cxt.closePath()
            cxt.stroke()
            cxt.restore()
        </script>
    </body>
</html>

星空完整版


 

html+js

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>星空</title>
        <style>
            * {
                padding: 0;
                margin: 0;
                border: 0;
            }
            body {
                overflow: hidden;
            }
            #canvas {
                display: block;
                background: url('http://www.taopic.com/uploads/allimg/140118/234914-14011PZ32692.jpg');
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script>
            //定时器卡顿bug解决方法:帧动画
            window.requestAnimFrame = (function() {
                return (
                    window.requestAnimFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    function(callback) {
                        window.setTimeout(callback, 1000 / 60)
                    }
                )
            })()
            var canvas = document.getElementById('canvas') //获取canva画布
            var cxt = canvas.getContext('2d') //设置canvas的绘画环境，相当于画笔
            var w, h
            var num = 200 //初始化星星的数量
            var data = [] //存储星星的数据
            var move = {} //存储鼠标的数据
            window.onresize = into //窗口缩放星星不变
            //初始化
            function into() {
                //窗口缩放星星不变，初始化
                data = []
                move = {}
                //画布和浏览器等宽高
                w = canvas.width = window.innerWidth
                h = canvas.height = window.innerHeight
                //绘制星星的圆点
                for (var i = 0; i < num; i++) {
                    //定义每一次圆生成的随机位置以及模拟运动速度增量
                    data[i] = {
                        x: Math.random() * w,
                        y: Math.random() * h,
                        cX: Math.random() * 0.6 - 0.3,
                        cY: Math.random() * 0.6 - 0.3,
                    }
                    Circle(data[i].x, data[i].y)
                }
            }
            into()
            function Circle(x, y) {
                cxt.save() //保存路径
                cxt.fillStyle = 'pink' //颜色
                cxt.beginPath() //开始路径
                cxt.arc(x, y, 0.5, Math.PI * 2, false) //圆
                cxt.closePath() //闭合路径
                cxt.fill() //填充
                cxt.restore() //释放路径
            }
            //星星运动
            !(function draw() {
                cxt.clearRect(0, 0, w, h) //先清除整个画布
                for (var i = 0; i < num; i++) {
                    //绘制当前星星
                    data[i].x += data[i].cX
                    data[i].y += data[i].cY
                    //边界值判断
                    if (data[i].x > w || data[i].x < 0) data[i].cX = -data[i].cX
                    if (data[i].y > h || data[i].y < 0) data[i].cY = -data[i].cY
                    Circle(data[i].x, data[i].y)
                    //用勾股定理判断是否连线
                    for (var j = i + 1; j < num; j++) {
                        //上一个点
                        if (
                            (data[i].x - data[j].x) * (data[i].x - data[j].x) +
                                (data[i].y - data[j].y) *
                                    (data[i].y - data[j].y) <=
                            50 * 50
                        ) {
                            //绘制线条
                            line(data[i].x, data[i].y, data[j].x, data[j].y)
                        }
                        if (move.x) {
                            if (
                                (data[i].x - move.x) * (data[i].x - move.x) +
                                    (data[i].y - move.y) *
                                        (data[i].y - move.y) <=
                                100 * 100
                            ) {
                                line(data[i].x, data[i].y, move.x, move.y)
                            }
                        }
                    }
                }
                //定时器卡顿bug解决方法:帧动画
                window.requestAnimFrame(draw)
                // setInterval(function(){
                // draw();
                // },13);
            })()
            //连线
            function line(x1, y1, x2, y2) {
                var color = cxt.createLinearGradient(x1, y1, x2, y2)
                color.addColorStop(0, '#fff')
                color.addColorStop(1, '#8cadf4')
                cxt.save()
                cxt.strokeStyle = color
                cxt.beginPath()
                cxt.moveTo(x1, y1) //起点
                cxt.lineTo(x2, y2) //终点
                cxt.closePath()
                cxt.stroke()
                cxt.restore()
            }
            //移入鼠标进行连线
            document.onmousemove = function(e) {
                move.x = e.clientX
                move.y = e.clientY
            }
            console.log(move)
        </script>
    </body>
</html>

鼠标移入线变色判断

html 代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>星空</title>
        <style>
            * {
                padding: 0;
                margin: 0;
                border: 0;
            }
            body {
                overflow: hidden;
            }
            #canvas {
                display: block;
                background: url('http://www.taopic.com/uploads/allimg/140118/234914-14011PZ32692.jpg');
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script>
            //定时器卡顿bug解决方法:帧动画
            window.requestAnimFrame = (function() {
                return (
                    window.requestAnimFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    function(callback) {
                        window.setTimeout(callback, 1000 / 60)
                    }
                )
            })()
            var canvas = document.getElementById('canvas') //获取canva画布
            var cxt = canvas.getContext('2d') //设置canvas的绘画环境，相当于画笔
            var w, h
            var num = 200 //初始化星星的数量
            var data = [] //存储星星的数据
            var move = {} //存储鼠标的数据
            window.onresize = into //窗口缩放星星不变
            //初始化
            function into() {
                //窗口缩放星星不变，初始化
                data = []
                move = {}
                //画布和浏览器等宽高
                w = canvas.width = window.innerWidth
                h = canvas.height = window.innerHeight
                //绘制星星的圆点
                for (var i = 0; i < num; i++) {
                    //定义每一次圆生成的随机位置以及模拟运动速度增量
                    data[i] = {
                        x: Math.random() * w,
                        y: Math.random() * h,
                        cX: Math.random() * 0.6 - 0.3,
                        cY: Math.random() * 0.6 - 0.3,
                    }
                    Circle(data[i].x, data[i].y)
                }
            }
            into()
            function Circle(x, y) {
                cxt.save() //保存路径
                cxt.fillStyle = 'pink' //颜色
                cxt.beginPath() //开始路径
                cxt.arc(x, y, 0.5, Math.PI * 2, false) //圆
                cxt.closePath() //闭合路径
                cxt.fill() //填充
                cxt.restore() //释放路径
            }
            //星星运动
            !(function draw() {
                cxt.clearRect(0, 0, w, h) //先清除整个画布
                for (var i = 0; i < num; i++) {
                    //绘制当前星星
                    data[i].x += data[i].cX
                    data[i].y += data[i].cY
                    //边界值判断
                    if (data[i].x > w || data[i].x < 0) data[i].cX = -data[i].cX
                    if (data[i].y > h || data[i].y < 0) data[i].cY = -data[i].cY
                    Circle(data[i].x, data[i].y)
                    //用勾股定理判断是否连线
                    for (var j = i + 1; j < num; j++) {
                        //上一个点
                        if (
                            (data[i].x - data[j].x) * (data[i].x - data[j].x) +
                                (data[i].y - data[j].y) *
                                    (data[i].y - data[j].y) <=
                            60 * 60
                        ) {
                            //绘制线条
                            line(
                                data[i].x,
                                data[i].y,
                                data[j].x,
                                data[j].y,
                                false,
                            )
                        }
                        if (move.x) {
                            if (
                                (data[i].x - move.x) * (data[i].x - move.x) +
                                    (data[i].y - move.y) *
                                        (data[i].y - move.y) <=
                                120 * 120
                            ) {
                                line(data[i].x, data[i].y, move.x, move.y, true)
                            }
                        }
                    }
                }
                //定时器卡顿bug解决方法:帧动画
                window.requestAnimFrame(draw)
                // setInterval(function(){
                // draw();
                // },13);
            })()
            //判断鼠标移入,变色连线
            function line(x1, y1, x2, y2, isMove) {
                var color = cxt.createLinearGradient(x1, y1, x2, y2)
                if (!isMove) {
                    color.addColorStop(0, '#3cbafc')
                    color.addColorStop(1, '#a5dffd')
                } else {
                    color.addColorStop(0, '#fff')
                    color.addColorStop(1, '#f4f59b')
                }
                cxt.save()
                cxt.strokeStyle = color
                cxt.beginPath()
                cxt.moveTo(x1, y1) //起点
                cxt.lineTo(x2, y2) //终点
                cxt.closePath()
                cxt.stroke()
                cxt.restore()
            }
            //移入鼠标进行连线
            document.onmousemove = function(e) {
                move.x = e.clientX
                move.y = e.clientY
            }
            console.log(move)
        </script>
    </body>
</html>
web前端开发文档论文
web前端开发规范文档
阿里前端开发规范文档
web前端开发流程文档
» 本文来自：前端开发者 » 《前端H5 canvas星空背景连线》
» 本文链接地址：https://www.rokub.com/6743.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论