<html>
<body>
<div style="text-align: center;">
<canvas id="earth" style="border: 1px #ccc solid;"></canvas>
<input type="button" value="start" onClick="doStart();"/>
<input type="button" value="stop" onClick="doStop();"/>
</div>
<script type="text/javascript">
var valTool = new Object();
valTool.flag = false;
valTool.scale = 0.5;
initTurnEarth(valTool);
function doStart()
{
valTool.flag = true;
initTurnEarth(valTool);
}
function doStop()
{
valTool.flag = false;
}
function initTurnEarth(valTool)
{
var mycv = document.getElementById("earth");
var dr = mycv.getContext("2d");
var earth = new Object();
earth.img = new Image();
earth.img.src = "img/earth.png";
var search = new Object();
search.img = new Image();
search.img.src = "img/earth_search.png";
mycv.width = earth.img.width * valTool.scale;
mycv.height = earth.img.height * valTool.scale;
earth.x = 0;
earth.y = 0;
search.x = 117;
search.y = 6;
valTool.degree = 0;
valTool.speed = 5;
doTurnEarth(valTool,dr,earth,search);
}
function doTurnEarth(valTool,dr,earth,search)
{
valTool.degree = valTool.degree + valTool.speed;
if ( valTool.degree > 360) { valTool.degree = 0};
//清空
dr.clearRect(0,0,earth.img.width,earth.img.height);
dr.save();
//縮放畫布
dr.scale(0.5,0.5);
dr.drawImage(earth.img,earth.x,earth.y);
//畫點
if(valTool.degree > 0 && valTool.degree < 30 )
{
dr.beginPath();
dr.arc(earth.img.width/2+search.img.width/2, search.img.height/2, 3, 0, Math.PI*2);
dr.closePath();
dr.fillStyle = "white";
dr.fill();
}
//偏移-旋轉-回到中心
dr.translate((search.x),(search.y + (search.img.height)));
dr.rotate( valTool.degree * 2 * Math.PI / 360);
dr.translate(-(search.x),-(search.y + (search.img.height)));
dr.drawImage(search.img,search.x,search.y);
//回到上一個狀態
dr.restore();
if(valTool.flag)
{
setTimeout(function(){ doTurnEarth(valTool,dr,earth,search);},60);
}
}
</script>
</body>
</html>js canvas掃描儀動畫
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章