一个HTML5的效果。
PS:IE8不能看出效果,新版火狐和谷歌浏览器可以看出。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>HTML5生成玫瑰线图案</title> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- #can {background-color:#ece9d8;} --> </style> <style type="text/css" mce_bogus="1"> #can {background-color:#ece9d8;} </style> </head> <body> <canvas id="can" width="500" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("can"); var ctx = canvas.getContext("2d"); var _x = 250, _y = 200; ctx.beginPath(); ctx.shadowOffsetX = 1; ctx.shadowOffsetY = 1; ctx.shadowBlur = 4; ctx.shadowColor = 'rgba(255, 255, 255, 1)'; ctx.strokeStyle = "#000"; ctx.lineWidth = 1; for (i = 0; i <= 360; i++) { var point0 = getPoint(i - 1); var point = getPoint(i); ctx.moveTo(_x + point0[0], _y + point0[1]); ctx.lineTo(_x + point[0], _y + point[1]); } ctx.stroke(); function getPoint(i) { var len = 200 * Math.sin(5 * i ); return [parseInt(len * Math.cos(i)), parseInt(len * Math.sin(i))]; } </script> </body> </html>