html5 canvas实现小球绕圆旋转

最新推荐文章于 2024-05-20 10:53:34 发布

曹振华

最新推荐文章于 2024-05-20 10:53:34 发布

阅读量7.7k

点赞数 2

本文链接：https://blog.csdn.net/chadcao/article/details/39293945

版权

html5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试</title>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        var ball_count = 12;//小球的个数
        var circle_x = 0;//圆心的X坐标
        var circle_y = 0;//圆心的Y坐标
        var circle_r = 50;//圆的半径
        var now_count = 0;//当前显示小球的个数
        var balls_array;//用来存储小球信息
        var angle_change = 1;//角度变化
        var iID;
        var canvas;//画布
        var context;//画布环境
        $(function () {
            var $canvas = $('#myCanvas');
            canvas = $canvas[0];
            canvas.addEventListener('mouseover', mouseOverCanvas, false);//鼠标移到Canvas
            canvas.addEventListener('mouseout', mouseOutCanvas, false);//鼠标移出Canvas
            canvas.addEventListener('click', clickCanvas, false);//鼠标单击Canvas
            context = canvas.getContext('2d');
            balls_array = new Array(ball_count);
            circle_x = $canvas.width() / 2;
            circle_y = $canvas.height() / 2;
            loadBall();
        });
        //小球移动
        function ballMove() {
            context.clearRect(0, 0, canvas.width, canvas.height);//清空画布中内容
            for (var i = 0; i < balls_array.length; i++) {
                var ball = balls_array[i];
                if (ball.angle == 360) {
                    ball.angle = 0;
                }
                ball.angle = ball.angle + angle_change;//角度
                var radian = ball.angle * (Math.PI / 180);//弧度
                ball.x = (circle_x + circle_r * Math.cos(radian)) - ball.w / 2;
                ball.y = (circle_y + circle_r * Math.sin(radian)) - ball.h / 2;
                context.drawImage(ball.image, ball.x, ball.y, ball.w, ball.h);
            }
        }
        //加载小球
        function loadBall() {
            for (var i = 0; i < ball_count; i++) {
                var angle = (i + 1) * (360 / ball_count);//角度
                var radian = angle * (Math.PI / 180);//弧度
                //初始化图片
                var img = new Image()
                img.id = i + 1;
                img.src = 'ball.png';
                //存放小球信息
                var ball = {};
                ball.id = img.id;
                ball.w = 32;
                ball.h = 32;
                ball.x = (circle_x + circle_r * Math.cos(radian)) - ball.w / 2;
                ball.y = (circle_y + circle_r * Math.sin(radian)) - ball.h / 2;
                ball.angle = angle;
                ball.image = img;
                balls_array[i] = ball;
                img.onload = function () {
                    for (var j = 0; j < balls_array.length; j++) {
                        if (this.id == balls_array[j].id) {
                            var item = balls_array[j];
                            context.drawImage(img, item.x, item.y, item.w, item.h);
                            break;
                        }
                    }
                    now_count++;
                    if (now_count == ball_count) {//当小球全部加载完成
                        iID = setInterval(ballMove, 40);//40ms移动小球
                    }
                }
            }
        }
        //鼠标单击canvas
        function clickCanvas(e) {
            p = getEventPosition(e);
            for (var i = 0; i < balls_array.length; i++) {
                var ball = balls_array[i];
                if (p.x >= ball.x && p.x <= (ball.x + ball.w) && p.y >= ball.y && p.y <= (ball.y + ball.h)) {
                    alert(ball.id);
                    //window.location.href = 'http://www.baidu.com?id=' + ball.id;
                    break;
                }
            }
        }
        //鼠标移到Canvas,小球停止移动
        function mouseOverCanvas() {
            clearInterval(iID);
        }
        //鼠标移出Canvas,小球移动
        function mouseOutCanvas() {
            iID = setInterval(ballMove, 40);
        }
        //获取事件对象发生的位置
        function getEventPosition(ev) {
            var x, y;
            if (ev.layerX || ev.layerX == 0) {
                x = ev.layerX;
                y = ev.layerY;
            } else if (ev.offsetX || ev.offsetX == 0) { // Opera   
                x = ev.offsetX;
                y = ev.offsetY;
            }
            return { x: x, y: y };
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="250" height="250">
        这个浏览器不支持HTML5元素。
    </canvas>
</body>
</html>

曹振华

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
html5 canvas实现小球绕圆旋转

测试 var iID; var x = 0; var y = 0; var w = 50; var h = 50; $(function () { //绘制长方形 var canvas = $('#myCanvas')[0];
复制链接

扫一扫