Javascript 基于下拉列表的画布上带测量的动画圆圈_Javascript_Jquery_Html_Canvas_Html5 Canvas

Javascript 基于下拉列表的画布上带测量的动画圆圈

javascript jquery html canvas html5-canvas

Javascript 基于下拉列表的画布上带测量的动画圆圈,javascript,jquery,html,canvas,html5-canvas,Javascript,Jquery,Html,Canvas,Html5 Canvas,所以我制作了这个小提琴，目的是通过在下拉列表中选择人体的各个区域来指出人体的各个区域这就是我目前所做的：让coords={ 首先：{ 双手：{ 左：{ x:100， y:360 }, 对:{ x:280， y:360 } }, 脚：{ 左：{ x:180， y:590 }, 对:{ x:210， y:590 } } }, 第二：{ 双手：{ 左：{ x:365， y:360 }, 对:{ x:545， y:360 } }, 脚：{ 左：{ x:430， y:590 }, 对:{ x:480

所以我制作了这个小提琴，目的是通过在下拉列表中选择人体的各个区域来指出人体的各个区域

这就是我目前所做的：

让coords={ 首先：{ 双手：{ 左：{ x:100， y:360 }, 对:{ x:280， y:360 } }, 脚：{ 左：{ x:180， y:590 }, 对:{ x:210， y:590 } } }, 第二：{ 双手：{ 左：{ x:365， y:360 }, 对:{ x:545， y:360 } }, 脚：{ 左：{ x:430， y:590 }, 对:{ x:480， y:590 } } } } 让绘图=选项=>{ 让canvas=document.getElementById'canvas'；如果canvas.getContext{ 设ctx=canvas.getContext'2d'； ctx.clearRect0，0，canvas.width，canvas.height；如果选项===‘手’{ coordsDrawctx，coords.maleFirst.hands.left.x，coords.maleFirst.hands.left.y； coordsDrawctx，coords.maleFirst.hands.right.x，coords.maleFirst.hands.right.y； coordsDrawctx，coords.maleSecond.hands.left.x，coords.maleSecond.hands.left.y； coordsDrawctx，coords.maleSecond.hands.right.x，coords.maleSecond.hands.right.y； } 如果选项=='foot'{ coordsDrawctx，coords.maleFirst.foot.left.x，coords.maleFirst.foot.left.y； coordsDrawctx，coords.maleFirst.foot.right.x，coords.maleFirst.foot.right.y； coordsDrawctx，coords.maleSecond.foot.left.x，coords.maleSecond.foot.left.y； coordsDrawctx，coords.maleSecond.foot.right.x，coords.maleSecond.foot.right.y； } } } 让coordsDraw=ctx，x，y=>{ ctx.beginPath； ctx.fillStyle='01567f'；//填充颜色 ctx.arcx，y，5，0，2*Math.PI； ctx.fill； ctx.closePath； } document.getElementById'options'.addEventListener'change'，函数{ 提取这个值 }; 帆布{ 背景图片：url'http://www.coloringsky.com/wp-content/uploads/2015/11/How-to-Draw-Human-Body-Coloring-Pages.jpg'; 背景重复：无重复；背景尺寸：包含；背景位置：中心；宽度：100%； } 选择选项手脚

我会这样做，这个例子没有动画环，但我展示了你将把代码放在哪里

<!doctype html>

<!doctype html>

更新

现在是动画戒指

帆布{ 背景图片：url'http://www.coloringsky.com/wp-content/uploads/2015/11/How-to-Draw-Human-Body-Coloring-Pages.jpg'; 背景重复：无重复；背景尺寸：包含；背景位置：中心；宽度：100%； } 选择选项手脚 var canvas=document.querySelectorcanvas； var context=canvas.getContext2d； var option=document.querySelectorselect；常数=0.08； var环=[]； var-ringOffsetH=110； var ringOffsetF=178；常数半径=10；常数最小半径=0； var收缩=假； var增长=假；动画循环； //环构造函数函数环n，x，y，r，v，vl { this.name=n；这个.x=x；这个。y=y；这个半径=r；这个可见=v；这个速度=vl； this.draw=函数 { context.beginPath； context.arcthis.x，this.y，this.radius，0，Math.PI*2，false； context.closePath；中风； } 这个.animate=函数 { //动画代码在这里如果this.radius>MIN_radius&&！growing | | this.radius>=radius&&growing { 成长=虚假；收缩=真； this.radius-=this.velocity*EASING； } 如果此.radiusforvar o=0；除非你交配，否则就是这样。

<select name="options" id="options">
    <option value="#">Select option</option>
    <option value="hands">hands</option>
    <option value="feet">feet</option>
</select>
<br>
<br>

<canvas width="650" height="650">

<script>

    var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");

    var option = document.querySelector("select");


    var rings = [];
    var ringOffsetH = 110;
    var ringOffsetF = 155;

    animationLoop();


    //The ring constructor
    function Ring(x,y,r,v)
    {
        this.x = x;
        this.y = y;
        this.radius = r;
        this.visible = v;

        this.draw = function()
        {
            context.beginPath();
            context.arc(this.x,this.y,this.radius,0,Math.PI*2,false);
            context.closePath();
            context.stroke();

        }

        this.animate= function()
        {
            //animation easing code goes here
        }
    };

    function animationLoop()
    {
        window.requestAnimationFrame(animationLoop,canvas);


        //Loop through options tracking the currently selected one
        for(var o=0; o<option.length; o++)
        {
            var selectedOption = option.selectedIndex;

            switch(selectedOption)
            {
                case 1:
                    clearRings(rings);
                    for(var n=0; n<2; n++)
                    {
                        var ring = new Ring(165*n+ringOffsetH,350,10,true);//Here you could replace x,y with your coord getters instead of hardcoding as I have done
                        rings.push(ring);
                    }
                break;

                case 2:
                    clearRings(rings);
                    for(var n=0; n<2; n++)
                    {
                        var ring = new Ring(70*n+ringOffsetF,600,10,true);
                        rings.push(ring);
                    }
                break;

                default:
                clearRings(rings);
                console.log("nothing");
                break;
            }
        }

        //Loop through rings calling the rings animation function
        //if visible
        for(var r=0; r<rings.length; r++)
        {
            var ring = rings[r];

            if(ring.visible)
            {
                ring.animate();
            }
        }


        render();
    };

    function clearRings(array)
    {
        this.array = array;

        array.length = 0;
    }

    function render()
    {
        context.clearRect(0,0,canvas.width,canvas.height);

        //Loop through rings
       if(rings.length !== 0)
       {
        for(var r=0; r<rings.length; r++)
        {
            //Assign the current ring to a temporary 
            //ring reference
            var ring = rings[r];

            //Draw the ring
            ring.draw();
        }
      }


    };



</script>

<!doctype html>

<style>

    canvas {

    background-image:url('http://www.coloringsky.com/wp-content/uploads/2015/11/How-to-Draw-Human-Body-Coloring-Pages.jpg');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    width: 100%;

    }

</style>

<select name="options" id="options">
    <option value="#">Select option</option>
    <option value="hands">hands</option>
    <option value="feet">feet</option>
</select>
<br>
<br>

<canvas width="650" height="650">

<script>

    var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");

    var option = document.querySelector("select");
    const EASING = .08;

    var rings = [];
    var ringOffsetH = 110;
    var ringOffsetF = 178;
    const RADIUS = 10;
    const MIN_RADIUS = 0;
    var shrinkRing = false;
    var growRing = false;


    animationLoop();


    //The ring constructor
    function Ring(n,x,y,r,v,vl)
    {
        this.name = n;
        this.x = x;
        this.y = y;
        this.radius = r;
        this.visible = v;
        this.velocity = vl;

        this.draw = function()
        {
            context.beginPath();
            context.arc(this.x,this.y,this.radius,0,Math.PI*2,false);
            context.closePath();
            context.stroke();

        }

        this.animate= function()
        {


            //animation easing code goes here
            if((this.radius > MIN_RADIUS && !growRing) 
              || (this.radius >= RADIUS && growRing))
            {
                growRing = false;
                shrinkRing = true;
                this.radius -= this.velocity * EASING;
            }
            if((this.radius < RADIUS && !shrinkRing) 
              || (this.radius < MIN_RADIUS && shrinkRing))
            {

                shrinkRing = false;
                growRing = true;

                this.radius += this.velocity * EASING;

            }

        }
    };

    function animationLoop()
    {
        window.requestAnimationFrame(animationLoop,canvas);


        //Loop through options tracking the currently selected one
        for(var o=0; o<option.length; o++)
        {
            var selectedOption = option.selectedIndex;

            switch(selectedOption)
            {
                case 1:
                    if(rings.length !== 0)
                    {
                        for(var r=0; r<rings.length; r++)
                        {
                            var tempRing = rings[r];

                            if(tempRing.name !== "hands")
                            {
                                clearRings(rings);

                                for(var n=0; n<2; n++)
                                {
                                    var ring = new Ring("hands",(165*n)+ringOffsetH,350,
                                    RADIUS,true,5);
                                    rings.push(ring);
                                }
                            }

                        }
                    }
                    else
                    {
                        for(var n=0; n<2; n++)
                        {
                            var ring = new Ring("hands",(165*n)+ringOffsetH,350,
                            RADIUS,true,5);
                            rings.push(ring);
                        }
                    }
                break;

                case 2:
                    if(rings.length !== 0)
                    {
                        for(var r=0; r<rings.length; r++)
                        {
                            var tempRing = rings[r];

                            if(tempRing.name !== "feet")
                            {
                                clearRings(rings);

                                for(var n=0; n<2; n++)
                                {
                                    var ring = new Ring("feet",(30*n)+ringOffsetF,600,
                                    RADIUS,true,5);
                                    rings.push(ring);
                                }
                            }

                        }
                    }
                    else
                    {
                        for(var n=0; n<2; n++)
                        {
                            var ring = new Ring("feet",(30*n)+ringOffsetH,600,
                            RADIUS,true,5);
                            rings.push(ring);
                        }
                    }
                break;

                default:
                clearRings(rings);
                console.log("nothing");
                break;
            }
        }

        //Loop through rings calling the rings animation function
        //if visible
        for(var r=0; r<rings.length; r++)
        {
            var ring = rings[r];

            if(ring.visible)
            {
                ring.animate();
            }
        }


        render();
    };

    function clearRings(array)
    {
        this.array = array;

        array.length = 0;
    }

    function render()
    {
        context.clearRect(0,0,canvas.width,canvas.height);

        //Loop through rings
        if(rings.length !== 0)
        {
            for(var r=0; r<rings.length; r++)
            {
                //Assign the current ring to a temporary 
                //ring reference
                var ring = rings[r];

                //Draw the ring
                ring.draw();
            }
        }


    };



</script>