HTML5生成玫瑰线图案
2010-07-26 20:19 音乐让我说 阅读(429) 评论(0) 编辑 收藏 举报一个HTML5的效果。
PS:IE8不能看出效果,新版火狐和谷歌浏览器可以看出。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <! 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 > |
作者:音乐让我说(音乐让我说 - 博客园)
出处:http://music.cnblogs.com/
文章版权归本人所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步