canvas绘制旋转转盘

最新推荐文章于 2024-06-27 16:39:50 发布

vcxiaohan2

最新推荐文章于 2024-06-27 16:39:50 发布

阅读量1.5k

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/u011500781/article/details/51859552

版权

canvas 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

查看示例在这里 ☞ roundPlate示例

效果：http://www.suanier.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
    <link rel="shortcut icon" href="images/send.jpg" type="/image/x-icon">
    <link rel="stylesheet" href="http://v3.faqrobot.org/hvb/com/css/reset.css?dev=1">

    <script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/jquery-1.11.3.min.js?dev=1"></script>
    <script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/base.js?dev=1"></script>
    <script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/layer.js?dev=1"></script>
    <title>photoshow</title>

    <style>
        body, html {
            width: 100%;
            height: 100%;
        }
        html {
        }
        #photoshow {
            width: 1200px;
            margin: 0 auto;
            background: #fff;
        }
        @media screen and (max-width: 800px) {
            #photoshow {
                width: 100%;
            }
        }
        @media screen and (min-width: 800px) and (max-width: 1200px) {
            #photoshow {
                width: 800px;
            }
        }
        @media screen and (min-width: 1200px) {
            #photoshow {
                width: 1200px;
            }
        }
        #cav_totate {
            width: 80%;
            height: 80%;
            outline: 1px solid blue;
            margin: 0 auto;
            position: relative;
        }
        canvas {
            outline: 1px solid red;
            position: absolute;
            top: 0;
            left: 0;
        }
        

    </style>
</head>
<body>
    <div id="cav_totate">
        <canvas class="cav_robot"></canvas>
        <img class="RO_robot" src="images/robot.png" alt="机器人">
    </div>
    
<script>
    ;$(function() {
        var $cav_totate = $('#cav_totate'),
            $RO_robot = $('.RO_robot'),
            $cav_robot = $('.cav_robot');

        var size = [$cav_totate.width(), $cav_totate.height()];


        $cav_robot.attr({
            'width': size[0],
            'height': size[1],
        }).on('mousemove', function() {
            
        });

        //robot
        var cav_robot = $cav_robot[0].getContext('2d');
        var robot_R = [120, 120];//半径
        var round1_R = [115, 105];//半径
        var round2_R = [180, 165];//半径
        var round3_R = [205, 145];//半径
        var angle = 0;//角度
        var slope = 0;//倾斜度

        setInterval(function() {
            //图片
            cav_robot.clearRect(0, 0, $cav_totate.width(), $cav_totate.height());
            cav_robot.save();
            cav_robot.translate(size[0]/2, size[1]/2);//移动原点
            cav_robot.fillStyle = "#0C0C0E";
            cav_robot.beginPath();
            cav_robot.drawImage($RO_robot[0], 0, 0, 80, 80, -robot_R[0]/2, -robot_R[1]/2, robot_R[0], robot_R[1]);//5 6
            cav_robot.fill();
            cav_robot.restore();
        
            //扇形圈
            cav_robot.save();
            cav_robot.translate(size[0]/2, size[1]/2);//移动原点

            cav_robot.strokeStyle = "#0C0C0E";
            cav_robot.beginPath();
            cav_robot.arc(0, 0, round1_R[0], 0, 2*Math.PI);
            cav_robot.stroke();
            cav_robot.closePath();
            cav_robot.beginPath();
            cav_robot.rotate(angle*Math.PI/180);
            cav_robot.moveTo(0, -round1_R[0]);
            cav_robot.lineTo(0, -round1_R[1]);
            cav_robot.arc(0, 0, round1_R[1], -90*Math.PI/180, -30*Math.PI/180);
            cav_robot.stroke();
            cav_robot.closePath();

            cav_robot.rotate((60)*Math.PI/180);
            cav_robot.beginPath();
            cav_robot.moveTo(0, -round1_R[0]);
            cav_robot.lineTo(0, -round1_R[1]);
            cav_robot.stroke();
            cav_robot.closePath();
            cav_robot.restore();

            //线圈
            cav_robot.save();
            cav_robot.translate(size[0]/2, size[1]/2);//移动原点

            cav_robot.rotate(-angle*Math.PI/180);
            for(var i=0; i<120; i++) {
                cav_robot.beginPath();
                cav_robot.rotate(3*Math.PI/180);
                cav_robot.moveTo(0, -round2_R[0]);
                cav_robot.lineTo(0, -round2_R[1]);
                cav_robot.stroke();
                cav_robot.closePath();
            }
            cav_robot.restore();


            //点圈
            cav_robot.save();
            cav_robot.translate(size[0]/2, size[1]/2);//移动原点

            cav_robot.rotate(angle*Math.PI/180);
            for(var i=0; i<120; i++) {
                cav_robot.beginPath();
                cav_robot.rotate(3*Math.PI/180);
                cav_robot.arc(0, round3_R[0], 1, 0, 2*Math.PI);
                cav_robot.fill();
                cav_robot.closePath();
            }
            cav_robot.restore();

            cav_robot.save();
            cav_robot.translate(size[0]/2, size[1]/2);//移动原点
            for(var i=0; i<4; i++) {
                cav_robot.rotate(90*Math.PI/180);
                cav_robot.beginPath();
                cav_robot.moveTo(-5, round3_R[1]);
                cav_robot.lineTo(5, round3_R[1]);
                cav_robot.lineTo(0, round3_R[1]+5);
                cav_robot.fill();
                cav_robot.closePath();
            }
            cav_robot.restore();
            angle -= .2;
        }, 50);
        










    });
</script>
</body>
</html>