JS绘制生成花瓣效果的方法
本文实例讲述了JS绘制生成花瓣效果的方法。分享给大家供大家参考。具体如下:
这里使用JS绘制生成花瓣效果,纯JS生成的图形绘制效果,想研究一下JavaScript图形绘画方面知识的,不妨参考一下这个小程序,我觉得还是挺不错的。
运行效果如下图所示:
具体代码如下:
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Js绘制生成花瓣效果</title> </head> <body> <script Language="javascript"> function a(x,y,color) {document.write("<img border='0' style='position: absolute; left: "+(x+300)+"; top: "+(y+200)+";background-color: "+color+"' src='px.gif' width=1 height=1>")} </script> <script> for(t=1;t<=360;t++){ lo=200 * Math.sin(2 * (Math.PI / 180) * t); x = lo * Math.cos((Math.PI / 180) * t); y = lo * Math.sin((Math.PI / 180) * t); a(x,y,"#000000"); lo=200 * Math.cos(2 * (Math.PI / 180) * t); x = lo * Math.cos((Math.PI / 180) * t); y = lo * Math.sin((Math.PI / 180) * t); a(x,y,"#ff0000"); } </script> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
js+canvas绘制矩形的方法
本文实例讲述了js+canvas绘制矩形的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/xhtm
-
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { margin:50px; border:5px solid gray; box-shadow:0p
-
javascript绘制漂亮的心型线效果完整实例
本文实例讲述了javascript绘制漂亮的心型线效果实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>JS心型线</title> <style> div{ position:absolute; } .xx-box{ left:50%; top:50%;
-
JavaScript+html5 canvas绘制渐变区域完整实例
本文实例讲述了JavaScript+html5 canvas绘制渐变区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { border:3px solid gray; } </style> </head&
-
JavaScript+html5 canvas绘制的小人效果
本文实例讲述了JavaScript+html5 canvas绘制的小人效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中的缩放</tit
-
js+css绘制颜色动态变化的圈中圈效果
本文实例讲述了js+css绘制颜色动态变化的圈中圈效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title>circle</title> <style type="text/css" > .circle { border-radius:50%; background:#DDDDDD; } .circle_inside { width:80%; height:80%;
-
js绘制圆形和矩形的方法
本文实例讲述了js绘制圆形和矩形的方法.分享给大家供大家参考.具体如下: 这里使用js来绘制圆形和矩形,支持选择图形的背景颜色,同时可设置圆角矩形.半径.正圆.矩形.正方形这几个选项.或许这些图形你不需要,但重要的是让你学会JavaScript绘制图形的方法,这是要表达的核心. 运行效果如下图所示: 具体代码如下: <!doctype html> <html> <head> <title>js来绘制圆形和矩形</title> <style&
-
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
本文实例讲述了JavaScript+html5 canvas绘制缤纷多彩的三角形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { width:500px; heig
-
js+canvas绘制五角星的方法
本文实例讲述了js+canvas绘制五角星的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/xht
-
js+canvas简单绘制圆圈的方法
本文实例讲述了js+canvas简单绘制圆圈的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/xh
随机推荐
- Prototype源码浅析 String部分(二)
- 如何用angularjs制作一个完整的表格
- 如何让用户再次访问我的网站时不需再提交相关信息?
- win32安装配置非安装版的MySQL
- JSON 客户端和服务器端的格式转换
- Windows 2003 全优化
- JavaWeb中使用JavaMail实现发送邮件功能实例详解
- 详解iOS的Core Animation框架中的CATransform3D图形变换
- JavaScript中获取鼠标位置相关属性总结
- PHP运行模式的深入理解
- Android编程开发实现TextView显示表情图像和文字的方法
- 关于FLASH与XML交互应用中的理解
- java 实现文件夹的拷贝实例代码
- Javascript前端UI框架Kit使用指南之kitjs事件管理
- 强大的JavaScript响应式图表Chartist.js的使用
- 通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
- 用js自动判断浏览器分辨率的代码
- 详解Javascript中的Object对象
- Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
- Python排序搜索基本算法之希尔排序实例分析