canvas-简单的线条来回扫描

简单的线条来回在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张图片

你可能感兴趣的:(canvas-简单的线条来回扫描)