javascript绘制漂亮的心型线效果完整实例
网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了javascript绘制漂亮的心型线效果实现方法,结合完整实例形式分析了JavaScript图形绘制的具体步骤与相关实现技巧,需要的朋友可以参考下
本文实例讲述了javascript绘制漂亮的心型线效果实现方法。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>JS心型线</title> <style> div{ position:absolute; } .xx-box{ left:50%; :50%; margin-left:-250px; margin-:-250px; width:500px; height:500px; background-color:#000; } .xx-box .text{ :30%; height:48px; line-height:48px; color:#f00; text-shadow: 3px 3px 4px #f00; font-size:36px; font-weight:bold; width:100%; text-align:center; font-family:Tangerine,Tahoma,Arial,"\65f6\5c1a\4e2d\9ed1\7b80\4f53","\5b8b\4f53"; } .xx-box .item{ width:2px; height:20px; overflow:hidden; } </style> </head> <body> <div class="xx-box" id="xx-box"> <div class="text">I Love You</div> </div> <script> function createPoint(x,y,c){ var div = document.createElement("div"); div.className = "item"; div.style.left = x + "px"; div.style. = y + "px"; div.style.backgroundColor = c; document.getElementById("xx-box").appendChild(div); } function heartShape(r,dx,dy,c){//r:大小;dx:水平偏移;dy:垂直偏移;c:颜色 var m,n,x,y,i; for(i = 0; i <= 200; i += 0.04){ m = i; n = -r * (((Math.sin(i) * Math.sqrt(Math.abs(Math.cos(i)))) / (Math.sin(i) + 1.4)) - 2 * Math.sin(i) + 2); x = n * Math.cos(m) + dx; y = n * Math.sin(m) + dy; createPoint(x,y,c); } } heartShape(80,250,100,"#f00"); </script> </body> </html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程