效果圖：
代碼如下：
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
#myCanvas {
opacity: 0.7;
}
</style>
<div class="container">
<canvas id="myCanvas"></canvas>
</div>
<script>
var nTime = 2000;//完成一圈所需的毫秒數(shù)
var nStart = 0;
var dCanvas = $("#myCanvas")[0];
var oCtx = dCanvas.getContext("2d");
var rander = function (timeStamp) {
if (!nStart) {
nStart = timeStamp;
}
var nDiffTime = timeStamp - nStart;
oCtx.save();
oCtx.beginPath();
oCtx.arc(150, 150, 150, -1 / 2 * Math.PI, -1 / 2 * Math.PI + 2 * Math.PI * nDiffTime / nTime);
oCtx.lineTo(150, 150);
oCtx.closePath();
oCtx.clip();
oCtx.drawImage(img, 0, 0, 300, 300);
oCtx.restore();
if (nDiffTime <= nTime) {
requestAnimationFrame(rander);
}
};
var img = new Image();
img.src = 'img/randar.jpg';
img.onload = function () {
var jqContainer = $('.container');
dCanvas.width = jqContainer.width();
dCanvas.height = jqContainer.height();
requestAnimationFrame(rander);
};
</script>
好記性不如爛筆頭澄成，總結(jié)和記錄工作學(xué)習(xí)中的點(diǎn)點(diǎn)滴滴洒放，如有不對之處還請指教净当。
參考
[1] js實(shí)現(xiàn)雷達(dá)掃描效果
[2] canvas實(shí)現(xiàn)"雷達(dá)掃描"效果
[3] 基于canvas實(shí)現(xiàn)的旋轉(zhuǎn)時(shí)間圓點(diǎn)
[4] canvas動(dòng)態(tài)畫圓弧及requestAnimationFrame
