简单的线条来回在canvas区域内扫描,很简单的效果!
<body>
<div>
<canvas id="_canvas" width="700" height="500">
</canvas>
</div>
<script>
window.onload =function(){
var canvas2d = document.getElementById("_canvas");
var c_w = canvas2d.width;
var c_h = canvas2d.height;
canvas2d = canvas2d.getContext("2d");
//红线来回扫描
var be_y = 1;
canvas2d.lineWidth = 2;
var add = 1;
function saomiao()
{
canvas2d.clearRect(0,0,c_w,c_h);
canvas2d.fillStyle = "black";
canvas2d.fillRect(0,0,c_w,c_h);
canvas2d.strokeStyle = "red";
canvas2d.beginPath();
canvas2d.moveTo(0,be_y);
canvas2d.lineTo(c_w,be_y);
be_y += add;
canvas2d.stroke();
if(be_y == c_h)
add = 0 - add;
if(be_y == 0)
add = Math.abs(add);
}
setInterval(saomiao,10);
};
</script>
</body>
![canvas-简单的线条来回扫描_第1张图片](http://img.e-com-net.com/image/info5/53c3638a05e747d2a6c6a554e276b70f.png)