个人中心
gpt4 book ai didi

javascript - 如何使用 Kinetic js/html5 为弧形设置动画，以便 "snake"变长？

转载 作者：行者123 更新时间：2023-11-30 10:31:27 25 4
gpt4 key购买 nike

本质上，我希望构建这样的东西:

http://themes.pixelworkshop.fr/?theme=CircularCountdownPlugin

我正在制作一个类似的倒计时时钟，其中有两个弧形相互重叠 - 一个是完整的圆圈，另一个是另一种颜色的弧形，它位于第一个弧形的顶部并不断增长和缩小以显示时间左边。 (我决定不使用这个实际的插件，因为我的时钟在计算和显示时间方面的功能会有所不同)

通过重新利用另一个问题的代码:

var redArc = new Kinetic.Shape({
    drawFunc: function (canvas) {
        var ctx = canvas.getContext();
        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI / 2, true);
        canvas.fillStroke(this);
    },
    x: x,
    y: y,
    stroke: 'rgb(255,0,0)',
    strokeWidth: 20,
    offset: [x, y]
});

http://jsfiddle.net/EkG5P/1/

我能够画出我需要的弧线。但我无法弄清楚如何为其中一个弧形的变化大小设置动画(增加或缩小“蛇”的长度)(注意这个例子并没有准确地显示我正在尝试做的事情，但它很接近足够的 b/c 它准确地显示了我想要设置动画以增长和收缩的弧线类型)

感谢您的帮助!

最佳答案

此函数会将时钟秒数转换为您可以在弧中使用的弧度:

// zero seconds (the 12 oclock position)
var startingAngle = secondsToRadians(0);

// get the current seconds and its associated radian angle  
var currentSeconds=new Date().getSeconds();
var endingAngle = secondsToRadians(currentSeconds);

function secondsToRadians(seconds) {
    var degrees=(seconds-15)*6;
    var radians=(degrees * Math.PI)/180;
    return(radians);
}

这是代码和 fiddle :http://jsfiddle.net/m1erickson/BR6TY/ 

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var centerX = Math.floor(canvas.width / 2);
    var centerY = Math.floor(canvas.height / 2);
    var radius = Math.floor(canvas.width / 3);
    var startingAngle = secondsToRadians(0);

    ctx.fillStyle = "#819FF0";
    ctx.strokeStyle="black";
    ctx.lineWidth=3;
    ctx.font="24px Verdana";

    setInterval(function() {
        // draw the arc about every second
        // set the arc to reflect the actual clock seconds
        drawClockWedge( new Date().getSeconds() );
    }, 1000);

    function drawClockWedge(seconds){

        // clear the canvas
        ctx.save();
        ctx.clearRect(0,0,canvas.width,canvas.height);

        // calculate the seconds (in actual time)
        // and convert to radians that .arc requires
        var endingAngle = secondsToRadians(seconds);

        // draw a closed arc representing elapsed seconds
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, false);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();

        // also display the seconds on top
        ctx.fillText("["+seconds+"]",centerX-25,centerY-radius-20);
        ctx.restore();
    }

    function secondsToRadians(seconds) {
        var degrees=(seconds-15)*6;
        var radians=(degrees * Math.PI)/180;
        return(radians);
    }

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

关于javascript - 如何使用 Kinetic js/html5 为弧形设置动画，以便 "snake"变长？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16740871/

25 4 0
文章推荐： javascript - 谷歌地图 API 3 - Javascript : Markers don't appear if created in function
文章推荐： javascript - 如何遍历对象的所有字段
文章推荐： swift - Lottie 动画在 "needsUpdate"处崩溃？
文章推荐： javascript - 类型错误 : Array not defined
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com