<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>蚂蚁线</title> </head> <body> <canvas id="canvas"></canvas> </body> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); offset = 0.0; context.setLineDash([5,5]); /** * 画虚线矩形，并调整偏移量 */ function antChange() { offset+=3.0; context.lineDashOffset=offset; context.beginPath(); context.rect(10,10,100,100); context.stroke(); } /** * 清除之前的图像 */ function clear(){ context.clearRect(0,0,canvas.width,canvas.height); } /** * 画蚂蚁线 */ function antLine(){ clear(); antChange(); } setInterval(antLine,200); </script> </html>
