以上代码能画出一个静态的图形，接下来改进了一下，可以动态画图啦
<style type="text/css"> *{ margin: 0; padding: 0; } div{ position: absolute; } #box{ width: 400px; height: 400px; background-color: blue; top: 100px; left: 300px; } #box > div{ background-color: yellow; height: 1px; } </style> <div id="box"></div> <script type="text/javascript"> var i = 1; function createH(){ if(i<=200){ var width = i*2+'px'; var left = (200-i)+'px'; }else{ var width = (400-(i-200)*2)+'px'; var left = (i-200)+'px'; } i++; var h = document.createElement('div'); h.style.width = width; h.style.left = left; h.style.top = (i-2)+'px'; return h; } var iA = setInterval(add,10); function add(){ if(i===400){ clearInterval(iA); return false; } var h = createH(); document.getElementById('box').appendChild(h); } </script>不妨自己试试，下面又做了个小小的修改
附上“龍”的代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } div{ position: absolute; } #box{ width: 400px; height: 400px; background-color: blue; top: 100px; left: 300px; } #box > div{ background-color: yellow; height: 1px; } #word{ color: blue; display: block; width: 200px; height: 200px; position: absolute; top: 100px; left: 100px; z-index: 1; font: 200px/200px '楷体'; } </style> </head> <body> <div id="box"> <span id="word">龍</span> </div> <script type="text/javascript"> var i = 1; function createH(){ if(i<=200){ var width = i*2+'px'; var left = (200-i)+'px'; }else{ var width = (400-(i-200)*2)+'px'; var left = (i-200)+'px'; } i++; var h = document.createElement('div'); h.style.width = width; h.style.left = left; h.style.top = (i-2)+'px'; return h; } var iA = setInterval(add,10); function add(){ if(i===400){ clearInterval(iA); return false; } var h = createH(); document.getElementById('box').appendChild(h); } </script> </body> </html>
转载于:https://www.cnblogs.com/hailspace/p/3184198.html
