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

前端开发canvas实现跟随鼠标旋转的箭头

2018-12-31 分类：HTML 阅读(861) 评论(0)
grunt对前端开发有什么用处
ios开发需要前端做什么
web前端开发用什么书

html 代码片段

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
        <title>canvas实现跟随鼠标旋转的箭头</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <canvas
            width=”500″
            height=”500″
            style=”border: 1px solid #555; display: block;margin: 0 auto;”
        ></canvas>
        <script>
            var arrow = function() {
                this.x = 0
                this.y = 0
                this.color = ‘#f90’
                this.rolation = 0
            }
            var canvas = document.querySelector(‘canvas’)
            var ctx = canvas.getContext(‘2d’)
            arrow.prototype.draw = function(ctx) {
                ctx.save()
                ctx.translate(this.x, this.y)
                ctx.rotate(this.rolation)
                ctx.fillStyle = this.color
                ctx.beginPath()
                ctx.moveTo(0, 15)
                ctx.lineTo(-50, 15)
                ctx.lineTo(-50, -15)
                ctx.lineTo(0, -15)
                ctx.lineTo(0, -35)
                ctx.lineTo(50, 0)
                ctx.lineTo(0, 35)
                ctx.closePath()
                ctx.fill()
                ctx.restore()
            }
            var Arrow = new arrow()
            Arrow.x = canvas.width / 2
            Arrow.y = canvas.height / 2
            var c_x, c_y //相对于canvas坐标的位置；
            var isMouseDown = false
            Arrow.draw(ctx)
            canvas.addEventListener(
                ‘mousedown’,
                function(e) {
                    isMouseDown = true
                },
                false,
            )
            canvas.addEventListener(
                ‘mousemove’,
                function(e) {
                    if (isMouseDown == true) {
                        c_x = getPos(e).x – canvas.offsetLeft
                        c_y = getPos(e).y – canvas.offsetTop
                        //setInterval(drawFram,1000/60)
                        requestAnimationFrame(drawFram)
                    }
                },
                false,
            )
            canvas.addEventListener(
                ‘mouseup’,
                function(e) {
                    isMouseDown = false
                },
                false,
            )
            function drawFram() {
                var dx = c_x – Arrow.x
                var dy = c_y – Arrow.y
                Arrow.rolation = Math.atan2(dy, dx)
                ctx.clearRect(0, 0, canvas.width, canvas.height)
                Arrow.draw(ctx)
            }
            function getPos(e) {
                var mouse = { x: 0, y: 0 }
                var e = e || event
                if (e.pageX || e.pageY) {
                    mouse.x = e.pageX
                } else {
                    mouse.x =
                        e.pageX +
                        document.body.scrollLeft +
                        document.document.documentElement.scrollLeft
                    mouse.y =
                        e.pageY +
                        document.body.scrollTop +
                        document.document.documentElement.scrollTop
                }
                return mouse
            }
        </script>
    </body>
</html>

不废话，直接上DEMO了，这个效果实现起来并不复杂，但是麻雀随小，五脏俱全，主要涉及到的知识点有：
1、canvas的基本绘图；
2、js各个事件的监听；
3、js动画；
4、三角函数结合js在canvas中的基本应用；

ios开发前端用什么语言
前端开发的一般用什么编程软件
手机前端开发需要学什么
赞(0)
前端开发者 » 前端开发canvas实现跟随鼠标旋转的箭头
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论