您的位置：首页 > Web前端 > JavaScript

js canvas扫描仪动画

2017-01-09 03:39 381 查看

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： canvas javascript 动画扫描仪 js

相关文章推荐

新的分享

章节导航