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
-
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
-
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%;
-
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
-
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
-
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
-
javascript绘制漂亮的心型线效果完整实例
本文实例讲述了javascript绘制漂亮的心型线效果实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>JS心型线</title> <style> div{ position:absolute; } .xx-box{ left:50%; top:50%;
-
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"> #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
随机推荐
- Docker 配置固定IP及桥接的实现方法
- VBS脚本使用WMI操作注册表的代码第1/2页
- Vue数据驱动模拟实现5
- js window.onload 加载多个函数的方法
- php 来访国内外IP判断代码并实现页面跳转
- php轻松实现文件上传功能
- 详解C++编程中用数组名作函数参数的方法
- js校验表单后提交表单的三种方法总结
- php版微信公众账号第三方管理工具开发简明教程
- 服务器安全设置之 系统服务篇
- jQuery实现点击任意位置弹出层外关闭弹出层效果
- JQuery触发事件例如click
- IE问题集锦
- 保存网页图片的八种方法小结
- Android实现将应用崩溃信息发送给开发者并重启应用的方法
- 详细解读Java编程中面向字符的输入流
- 刷新PHP缓冲区为你的站点加速
- laydate日历控件使用方法详解
- IDEA 开发多项目依赖的方法(图文)
- ajax处理返回的json格式数据方法