js实现雷达扫描效果

83 阅读 0 评论 55 点赞

我是靠谱客的博主魔幻柜子，最近开发中收集的这篇文章主要介绍js实现雷达扫描效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

etherdream的原理是使用borderWidth的动态改变，可兼容非HTML5浏览器，缺点是代码较多，需要新增DOM节点，而且只能用纯色遮罩，不能实现用图片做遮罩。

也可以用来做照片切换效果，点这里看DEMO

<canvas id="canvas1" width="400" height="300"></canvas>
<script>
//MyCtx是我写的一个通用的类，我自己写些小小的canvas js都用这个当先锋。
//把canvas 2d context的一些常用方法封装了一下，以便像jQuery那样作链式调用。
//对于最常用的绘制路径的指令，采用了字母缩写。习惯了svg的简洁，也搬迁到canvas来。
function MyCtx(ctx){
this.ctx = ctx;
}
(function (map){
for(var k in map){
MyCtx.prototype[k] = new Function('this.ctx.'+map[k]+'.apply(this.ctx,arguments); return this;');
}
}({
B:'beginPath', M:'moveTo', L:'lineTo', A:'arc', Z:'closePath', f:'fill', dI:'drawImage', cR:'clearRect', clip:'clip', save:'save', restore:'restore'
}));
function init(){
var ctx = document.getElementById("canvas1").getContext('2d');
var mtx = new MyCtx(ctx), i=-1;
function f(){
//链式调用绘图指令，绘制一个扇形，扇形的角度随时间逐渐变化，这是实现动画效果的关键。
mtx.save().dI(img,0,0).B().A(200,150,250,Math.abs(++i%100)*Math.PI/50,Math.PI*2,(i/100|0)%2).L(200,150).Z().clip().dI(img,-400,0).restore();
setTimeout(f,60);
}
f();
}
var img = new Image();
img.src = 'p1.jpg';
img.onload = init;
</script>