前端开发使用Canvas写的一个特效页面

web前端开发技术 说课
web前端开发技术知识体系
it前端技术开发论文

只使用了基本的画圆,就可以做出来一个有趣的特效
不过有BUG,圆移动到边缘的时候如果正巧变大就会卡住- –
代码片段 1

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>画布应用</title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
            #mainCanvas {
                width: 100%;
                height: 100%;
                background: #efefef;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id=”container”><canvas id=”mainCanvas”></canvas></div>
        <script type=”text/javascript”>
            window.onload = function() {
                setTimeout(function() {
                    dataInit()
                    canvasFix()
                    document.body.onmousemove = function(e) {
                        mouseLoc = getMouseLoc(e)
                    }
                    document.body.onmousedown = function(e) {
                        moveFlag = false
                    }
                    document.body.onmouseup = function(e) {
                        moveFlag = true
                    }
                    initCircArr()
                    setInterval(function() {
                        drawCirc()
                    }, 20)
                }, 100)
            }
            /**
             *
             * @authors CJY
             * @date 2015-04-30 09:16:55
             */
            var canvas = null
            var circArr = null
            var circNum = null
            var defaultR = null
            var circ = null
            var mouseLoc = null
            var moveFlag = null
            var canvasDrawCirc = function(canv, circ) {
                circ.canv = canv.getContext(‘2d’)
                circ.canv.globalAlpha = 0.9
                circ.canv.fillStyle = circ.col
                circ.canv.beginPath()
                circ.canv.arc(
                    Number(circ.loc[0]),
                    Number(circ.loc[1]),
                    circ.r,
                    0,
                    Math.PI * 2,
                    true,
                )
                circ.canv.closePath()
                circ.canv.fill()
            }
            var buildCirc = function(loc, r, col, direction, speed) {
                var circ = new Object()
                circ.loc = loc //圆的位置
                circ.minR = r //圆的最小半径
                circ.maxR = r + 30 //圆的最大半径
                circ.r = circ.maxR //圆的当前半径
                if (col != null || col != undefined) {
                    //圆的颜色
                    circ.col = col
                } else {
                    circ.col = ‘black’
                }
                if (direction != null || direction != undefined) {
                    //圆的方向
                    circ.direction = direction
                } else {
                    circ.direction = null
                }
                if (speed != null || speed != undefined) {
                    //圆的运动速度
                    circ.speed = speed
                } else {
                    circ.speed = 3
                }
                circ.xF = 1
                circ.yF = 1
                circ.dF = 1
                //圆的移动方法
                circ.move = function() {
                    if (circ.direction == null) {
                        return
                    }
                    if (circ.mouseCatchFlag && !moveFlag) {
                    } else {
                        circ.mouseCatcher()
                        circ.loc = new Array(
                            circ.loc[0] +
                                circ.speed *
                                    Math.sin((circ.direction * Math.PI) / 180) *
                                    circ.xF,
                            circ.loc[1] +
                                circ.speed *
                                    Math.cos((circ.direction * Math.PI) / 180) *
                                    circ.yF,
                        )
                        circ.turn()
                        circ.sizer()
                    }
                    setTimeout(circ.move, 20)
                }
                //圆的转向方法
                circ.turn = function() {
                    if (!!!canvas) {
                        return
                    }
                    if (
                        circ.loc[0] – circ.r <= 10 ||
                        circ.loc[0] + circ.r >= canvas.width – 10
                    ) {
                        circ.xF *= -1
                    } else if (
                        circ.loc[1] – circ.r <= 10 ||
                        circ.loc[1] + circ.r >= canvas.height – 10
                    ) {
                        circ.yF *= -1
                    }
                    if (circ.direction >= 360) {
                        circ.dF *= -1
                    } else if (circ.direction <= 0) {
                        circ.dF *= -1
                    }
                    circ.direction += circ.dF
                }
                //圆的大小变化方法
                circ.baseR = 1
                circ.sizer = function() {
                    if (circ.r < circ.minR) {
                        circ.r = circ.minR
                    } else if (circ.r > circ.maxR) {
                        circ.r = circ.maxR
                    }
                    if (circ.mouseCatchFlag) {
                        circ.baseR = -3
                    } else {
                        circ.baseR = 1
                    }
                    circ.r -= circ.baseR
                }
                //圆对鼠标的捕抓方法
                circ.mouseCatchFlag = false
                circ.mouseCatcher = function() {
                    var arange = 100
                    if (
                        mouseLoc[0] – arange < circ.loc[0] &&
                        circ.loc[0] < mouseLoc[0] + arange
                    ) {
                        if (
                            mouseLoc[1] – arange + 50 < circ.loc[1] &&
                            circ.loc[1] < mouseLoc[1] + arange – 50
                        ) {
                            circ.mouseCatchFlag = true
                        } else {
                            circ.mouseCatchFlag = false
                        }
                    } else {
                        circ.mouseCatchFlag = false
                    }
                }
                return circ
            }
            function clearCanvas(canvas) {
                var cleaner = canvas.getContext(‘2d’)
                cleaner.fillStyle = ‘#FFF’
                cleaner.fillRect(0, 0, canvas.width, canvas.height)
            }
            function initCircArr(e) {
                for (var i = 0; i < circNum; i++) {
                    circ = buildCirc(
                        randomLocation(minX, minY, maxX, maxY),
                        10,
                        randomColor(),
                        randomDirection(),
                        randomSpeed(),
                    )
                    circ.move()
                    circArr.push(circ)
                }
            }
            function drawCirc() {
                clearCanvas(canvas)
                for (var i = 0; i < circArr.length; i++) {
                    canvasDrawCirc(canvas, circArr[i])
                }
            }
            /**
             *
             * @authors CJY
             * @date 2015-04-30 09:21:16
             */
            var maxR = null
            var maxX = null,
                minX = null
            var maxY = null,
                minY = null
            var maxSpeed = null,
                minSpeed = null
            //通过ID获取元素
            function id(id) {
                return document.getElementById(id)
            }
            function canvasFix() {
                canvas.height = canvas.clientHeight
                canvas.width = canvas.clientWidth
            }
            function dataInit() {
                canvas = id(‘mainCanvas’)
                circArr = new Array()
                circNum = 100
                defaultR = 30
                maxR = 100
                ;(maxX = canvas.offsetWidth – maxR), (minX = maxR)
                ;(maxY = canvas.offsetHeight – maxR), (minY = maxR)
                ;(maxSpeed = 7), (minSpeed = 3)
                mouseLoc = new Array()
                moveFlag = true
            }
            //随机位置
            function randomLocation(minX, minY, maxX, maxY) {
                var loc = new Array(
                    parseInt(Math.random() * (maxX – minX) + minX),
                    parseInt(Math.random() * (maxY – minY) + minY),
                )
                return loc
            }
            function randomDirection() {
                return parseInt(Math.random() * 360)
            }
            function randomColor() {
                var cn = Math.random()
                if (cn < 0.2) {
                    var num = parseInt(Math.random() * 6)
                    switch (num) {
                        case 0:
                            var color = ‘black’
                            break
                        case 1:
                            var color = ‘red’
                            break
                        case 2:
                            var color = ‘blue’
                            break
                        case 3:
                            var color = ‘yellow’
                            break
                        case 4:
                            var color = ‘pink’
                            break
                        default:
                            var color = ‘green’
                    }
                } else {
                    var r = parseInt(Math.random() * 255)
                    var g = parseInt(Math.random() * 255)
                    var b = parseInt(Math.random() * 255)
                    var color =
                        ‘#’ + r.toString(16) + g.toString(16) + b.toString(16)
                }
                return color
            }
            function randomSpeed() {
                return parseInt(
                    Math.random() * (maxSpeed – minSpeed) + minSpeed,
                )
            }
            function randomR() {
                return parseInt(Math.random() * (35 – 10) + 10)
            }
            function getMouseLoc(e) {
                var eve = e || window.event
                var loc = new Array(eve.clientX, eve.clientY)
                return loc
            }
        </script>
    </body>
</html>
web前端开发技术 html
前端开发技术发展方向
前端开发技术难题
» 本文来自:前端开发者 » 《前端开发使用Canvas写的一个特效页面》
» 本文链接地址:https://www.rokub.com/7484.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!