[英]How can I animate an arc shape with Kinetic js/html5 so that the “snake” grows longer?
基本上我想建立這樣的東西:
http://themes.pixelworkshop.fr/?theme=CircularCountdownPlugin
我正在制作一個類似的倒計時鍾,兩個弧放在彼此的頂部 - 一個是一個完整的圓,另一個是另一個顏色的弧放在第一個的頂部,並且增長和收縮以顯示剩余的時間。 (我決定不使用這個實際的插件b / c我的時鍾將根據其計算和顯示時間的不同而有所不同)
通過重新設計另一個問題的代碼:
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]
});
我能夠繪制出我需要的弧線。 但我無法弄清楚如何設置其中一個弧的變化大小(增大或縮小“蛇”的長度)(注意這個例子並沒有顯示我正在嘗試做什么,但它已經關閉了)足夠的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);
}
這是代碼和小提琴: 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.