JavaScript图形实例：蝴蝶结图案
如何在JavaScript中实现网页的动画和特效
如何在JavaScript中实现网页的动画和特效JavaScript是一种强大的编程语言，它可以用来为网页添加动画和特效。
在本文中，我们将学习如何使用JavaScript实现网页动画和特效。
1.使用CSS动画：JavaScript可以与CSS动画配合使用，通过控制CSS属性的变化来实现动画效果。
可以通过添加或移除类来触发CSS 动画，也可以使用JavaScript直接修改CSS属性的值。
以下是一些常见的CSS属性，可以用来实现动画效果：- transform：可以利用translate、scale、rotate等函数来改变元素的位置、尺寸和旋转角度。
- opacity：可以通过改变元素的不透明度来实现淡入淡出效果。
- transition：可以使用过渡效果来平滑地改变元素的属性值。
通过在JavaScript中创建类或直接操作元素的样式，可以通过移动、旋转和改变元素的透明度来实现各种动画效果。
2.使用setTimeout和setInterval函数：JavaScript中的setTimeout和setInterval函数可以用来设置定时器，通过定时器来触发函数的执行。
在动画和特效中，可以使用setTimeout函数来延迟执行某个函数，来实现延迟效果。
setInterval函数可以用来循环执行一个函数，从而实现连续播放的效果。
3.使用requestAnimationFrame函数：requestAnimationFrame是一个优化的浏览器API，它可以在每次浏览器重绘之前调用一个回调函数，通常用于执行动画。
与setTimeout和setInterval不同，requestAnimationFrame会根据浏览器的绘制能力来调整动画的帧率，保证动画的流畅性并减少浏览器的负载。
使用requestAnimationFrame函数来调用动画函数，可以使用递归的方式来循环播放动画，通过不断更新元素的位置、尺寸和样式来实现动画效果。
JavaScript实现动态网页特效
JavaScript实现动态网页特效JavaScript是一种常用的编程语言，可以用于实现动态网页特效。
通过JavaScript，开发者可以为网页添加各种交互效果，使用户体验更加丰富和吸引人。
以下是一些常见的JavaScript动态网页特效的实现方法：1. 鼠标悬停效果：通过JavaScript可以实现当鼠标悬停在某个区域上时，改变该区域的样式或显示隐藏的内容。
例如，当用户将鼠标悬停在一个按钮上时，可以让按钮的颜色变化或显示按钮下方的一段描述文字。
2. 幻灯片效果：通过JavaScript可以实现网页上的幻灯片效果，使多张图片自动轮播展示。
可以通过设置定时器和改变图片的显示状态来实现。
这种效果常用于图片展示、轮播广告等地方。
3. 下拉菜单效果：通过JavaScript可以实现网页上的下拉菜单效果，让用户点击或悬停在一个导航栏上时，下方显示出更多的选项。
可以通过设置事件监听和改变菜单的可见性来实现。
4. 表单验证效果：通过JavaScript可以实现网页上的表单验证效果，检查用户输入的内容是否符合要求。
可以通过设置事件监听和编写验证函数来实现。
例如，当用户提交表单时，可以检查是否所有的必填项都已填写，并给出相应的提示。
5. 动态加载内容效果：通过JavaScript可以实现动态加载内容的效果，当用户滚动网页到一定位置时，自动加载更多的内容。
可以通过监听滚动事件和设置ajax 请求来实现。
这种效果常用于博客、社交媒体等网站上。
6. 特效动画效果：通过JavaScript可以实现各种特效动画，如淡入淡出效果、滑动效果、旋转效果等。
可以通过改变元素的显示状态、设置定时器和改变元素的样式来实现。
这种效果常用于网页中的广告、特效展示等地方。
7. 音频视频播放效果：通过JavaScript可以实现网页上的音频和视频播放效果。
可以通过设置事件监听、控制播放状态和改变样式来实现。
例如，当用户点击一个按钮时，可以播放音频或视频，并显示相应的控制按钮。
如何使用JavaScript实现Canvas绘图和动画
如何使用JavaScript实现Canvas绘图和动画使用JavaScript来实现Canvas绘图和动画是一种常见的技术，它可以实现各种各样的图形效果和动态交互，非常适合用于创建各种类型的网页动画和游戏。
在本文中，我将详细介绍如何使用JavaScript来绘制图形、实现动画以及一些常用的绘图和动画效果。
一、构建Canvas元素为了开始绘制和动画，我们首先需要在HTML文档中创建一个Canvas元素。
Canvas是HTML5中新增的元素，它提供了一个绘制2D 图形的区域，我们可以通过JavaScript来操纵它。
在HTML文档的body标签中添加以下代码：```<canvas id="myCanvas" width="500" height="300"></canvas> ```上面的代码创建了一个id为myCanvas的Canvas元素，宽度为500像素，高度为300像素。
二、获取Canvas上下文要绘制图形或进行动画，我们需要获取Canvas的上下文对象。
在JavaScript中，我们可以使用`getContext()`方法来获取上下文对象。
在JavaScript中，使用以下代码获取Canvas上下文对象：```const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');```上面的代码通过`getElementById`方法获取了id为myCanvas的Canvas元素，然后通过`getContext`方法获取了2D上下文对象ctx。
三、绘制基本图形下面介绍如何使用JavaScript在Canvas上绘制一些基本图形，例如矩形、圆形和直线。
Canvas提供了一系列的API可以用于绘制图形。
js案例大全
js案例大全JavaScript（简称JS）是一种高级的、解释型的编程语言。
它是一种动态类型、弱类型、基于原型的语言，内建支持类型。
JavaScript是世界上最流行的编程语言之一，也是前端开发的核心技术之一。
在本文中，我们将为大家介绍一些常见的JavaScript案例，希望能够帮助大家更好地理解和运用JavaScript。
1. 表单验证。
表单验证是Web开发中常见的需求之一。
通过JavaScript，我们可以轻松实现对表单输入内容的验证，比如验证用户名、密码、邮箱、手机号等。
以下是一个简单的表单验证案例：```javascript。
function validateForm() {。
var username = document.forms["myForm"]["username"].value;var password = document.forms["myForm"]["password"].value;if (username == "" || password == "") {。
alert("用户名和密码不能为空");return false;}。
}。
```。
在上面的案例中，我们定义了一个validateForm函数来验证表单输入内容，如果用户名和密码为空，则弹出警告框，并且阻止表单提交。
这样可以有效地提高用户体验，避免用户输入不合法的内容。
2. 动态创建元素。
JavaScript可以帮助我们动态地创建、修改和删除HTML元素。
这在Web开发中非常有用，可以使页面更加灵活和动态。
以下是一个动态创建元素的案例：```javascript。
function addElement() {。
var newDiv = document.createElement("div");var newContent = document.createTextNode("Hello, World!");newDiv.appendChild(newContent);var currentDiv = document.getElementById("div1");document.body.insertBefore(newDiv, currentDiv);}。
JavaScript经典实例
JavaScript经典实例跨浏览器事件跨浏览器添加事件//跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } }跨浏览器移除事件//跨浏览器移除事件function removeEvent(obj,type,fn){ if(obj.removeEventListener){ obj.removeEventListener(type,fn,false); }else if(obj.detachEvent){//兼容IE obj.detachEvent('on'+type,fn); }}跨浏览器阻⽌默认⾏为//跨浏览器阻⽌默认⾏为 function preDef(ev){ var e = ev || window.event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue =false; } }跨浏览器获取⽬标对象//跨浏览器获取⽬标对象function getTarget(ev){ if(ev.target){//w3c return ev.target; }else if(window.event.srcElement){//IE return window.event.srcElement; }}跨浏览器获取滚动条位置//跨浏览器获取滚动条位置，sp == scroll position function getSP(){ return{ top: document.documentElement.scrollTop || document.body.scrollTop, left : document.documentElement.scrollLeft || document.bo 跨浏览器获取可视窗⼝⼤⼩//跨浏览器获取可视窗⼝⼤⼩ function getWindow () { if(typeof window.innerWidth !='undefined') { return{ width : window.innerWidth, height : window.innerHeight }} else{ return { width : document.documentElement.clientWidth, height : document.documentElement.clientHeight } } },js 对象冒充<script type = 'text/javascript'>function Person(name , age){ = name ; this.age = age ; this.say = function (){ return "name : "+ + " age: "+this.age ; } ; }var o = new Object() ;//可以简化为Object() Person.call(o , "zhangsan" , 20) ; console.log(o.say() );//name : zhangsan age: 20</script>js 异步加载和同步加载异步加载也叫⾮阻塞模式加载，浏览器在下载js的同时，同时还会执⾏后续的页⾯处理。
七个基于JavaScript实现的情人节表白特效
七个基于JavaScript实现的情⼈节表⽩特效⽬录七⼣情⼈节送花动画告⽩特效玫瑰花盛开动画告⽩特效3d旋转相册点击爱⼼散开动画告⽩特效雷电打出告⽩⽂字特效粒⼦组合告⽩⽂字特效⼩熊拉⼿CSS3情⼈节动画表⽩特效七⼣情⼈节送花动画告⽩特效效果展⽰代码展⽰:<div id='content'><ul class='content-wrap'><!-- 第⼀副画⾯ --><li><!-- 背景图 --><div class="a_background"><div class="a_background_top"></div><div class="a_background_middle"></div><div class="a_background_botton"></div></div><!-- 云 --><div class="cloudArea"><div class="cloud cloud1"></div><div class="cloud cloud2"></div></div><!-- 太阳 --><div id="sun"></div></li><!-- 第⼆副画⾯ --><li><!-- 背景图 --><div class="b_background"></div><div class="b_background_preload"></div><!-- 商店 --><div class="shop"><div class="door"><div class="door-left"></div><div class="door-right"></div></div><!-- 灯 --><div class="lamp"></div></div><!-- 鸟 --><div class="bird"></div></li><!-- 第三副画⾯ --><li><!-- 背景图 --><div class="c_background"><div class="c_background_top"></div><div class="c_background_middle"></div><div class="c_background_botton"></div></div><!-- ⼩⼥孩 --><div class="girl"></div><div class="bridge-bottom"><div class="water"><div id="water1" class="water_1"></div><div id="water2" class="water_2"></div><div id="water3" class="water_3"></div><div id="water4" class="water_4"></div></div></div><!-- 星星 --><ul class="stars"><li class="stars1"></li><li class="stars2"></li><li class="stars3"></li><li class="stars4"></li><li class="stars5"></li><li class="stars6"></li></ul><div class="logo">祝天下有情⼈终成眷属</div></li></ul><!-- 雪花 --><div id="snowflake"></div><!-- ⼩男孩 --><div id="boy" class="charector"></div></div>玫瑰花盛开动画告⽩特效效果展⽰:<radialGradient id="gradient-0" gradientUnits="userSpaceOnUse" cx="-107.308" cy="104.329" r="59.181" gradientTransform="matrix(0.261752, 0.411262, -0.686293, 0.596934, 160.094667, 49.38985)"> <stop offset="0" style="stop-color: rgb(255, 0, 0);"/><stop offset="1" style="stop-color: rgb(141, 41, 41);"/></radialGradient>var svg = document.getElementById('svg');var animation0 = document.getElementById('animate0');svg.addEventListener('mouseenter', function(){ animation0.beginElement(); });var animation1 = document.getElementById('animate1');svg.addEventListener('mouseenter', function(){ animation1.beginElement(); });var animation2 = document.getElementById('animate2');svg.addEventListener('mouseenter', function(){ animation2.beginElement(); });var animation3 = document.getElementById('animate3');svg.addEventListener('mouseenter', function(){ animation3.beginElement(); });var animation4 = document.getElementById('animate4');svg.addEventListener('mouseenter', function(){ animation4.beginElement(); });var animation5 = document.getElementById('animate5');svg.addEventListener('mouseenter', function(){ animation5.beginElement(); });var animation6 = document.getElementById('animate6');svg.addEventListener('mouseenter', function(){ animation6.beginElement(); });var animation7 = document.getElementById('animate7');svg.addEventListener('mouseenter', function(){ animation7.beginElement(); });var animation8 = document.getElementById('animate8');svg.addEventListener('mouseenter', function(){ animation8.beginElement(); });var animation9 = document.getElementById('animate9');svg.addEventListener('mouseenter', function(){ animation9.beginElement(); });var animation10 = document.getElementById('animate10');svg.addEventListener('mouseenter', function(){ animation10.beginElement(); });var animation11 = document.getElementById('animate11');svg.addEventListener('mouseenter', function(){ animation11.beginElement(); });var animation12 = document.getElementById('animate12');svg.addEventListener('mouseenter', function(){ animation12.beginElement(); });var animation13 = document.getElementById('animate13');svg.addEventListener('mouseenter', function(){ animation13.beginElement(); });var animation14 = document.getElementById('animate14');svg.addEventListener('mouseenter', function(){ animation14.beginElement(); });3d旋转相册效果展⽰:代码展⽰:<div class="hovertreeinfo"><h2></h2></div><!-- 仅⾃动播放⾳乐 --><!--<audio loop src="img/qianyuqianxun.mp3" id="audio" autoplay preload="auto">该浏览器不⽀持audio属性</audio>--><audio loop src="img\qianyuqianxun.mp3" id="audio" controls autoplay preload="auto">该浏览器不⽀持audio属性</audio><script type="text/javascript">//--创建页⾯监听，等待微信端页⾯加载完毕触发⾳频播放document.addEventListener('DOMContentLoaded', function () {function audioAutoPlay() {var audio = document.getElementById('audio');audio.play();document.addEventListener("WeixinJSBridgeReady", function () {audio.play();}, false);}audioAutoPlay();});//--创建触摸监听，当浏览器打开页⾯时，触摸屏幕触发事件，进⾏⾳频播放document.addEventListener('touchstart', function () {function audioAutoPlay() {var audio = document.getElementById('audio');audio.play();}audioAutoPlay();});</script><!--/*外层最⼤容器*/--><div class="wrap"><!-- /*包裹所有元素的容器*/--><div class="cube"><!--前⾯图⽚ --><div class="out_front"><img src="img/img01.jpg " class="pic" /></div><!--后⾯图⽚ --><div class="out_back"><img src="img/img02.jpg" class="pic"/></div><!--左图⽚ --><div class="out_left"><img src="img/img03.jpg" class="pic" /></div><div class="out_right"><img src="img/img04.jpg" class="pic" /></div><div class="out_top"><img src="img/img05.jpg" class="pic" /></div><div class="out_bottom"><img src="img/img06.jpg" class="pic" /><!--⼩正⽅体 --><span class="in_front"><img src="img/img07.jpg" class="in_pic" /></span><span class="in_back"><img src="img/img08.jpg" class="in_pic" /></span><span class="in_left"><img src="img/img09.jpg" class="in_pic" /></span><span class="in_right"><img src="img/img10.jpg" class="in_pic" /></span><span class="in_top"><img src="img/img11.jpg" class="in_pic" /></span><span class="in_bottom"><img src="img/img12.jpg" class="in_pic" /></span></div></div>点击爱⼼散开动画告⽩特效效果展⽰:代码展⽰:<svg height="320" width="320" class="like" onclick="document.body.classList.toggle('liked')"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90" fill="white"> <!-- 80 by 70 --> </svg><!-- DECORATIONS (quite a lot of them) --><div class="dot dot-1"></div><div class="dot dot-2"></div><div class="dot dot-3"></div><div class="dot dot-4"></div><div class="dot dot-5"></div><div class="dot dot-6"></div><div class="dot dot-7"></div><div class="dot dot-8"></div>雷电打出告⽩⽂字特效效果展⽰:代码展⽰:<div class="page page-thunder-to-text"><input id="input" type="text" maxlength="24" placeholder="I love you!"><canvas id="canvas"></canvas></div><script>let canvas, ctx, w, h, thunder, text, particles, input;function Thunder(options) {options = options || {};this.lifespan = options.lifespan || Math.round(Math.random() * 10 + 10);this.maxlife = this.lifespan;this.color = options.color || '#fefefe';this.glow = options.glow || '#2323fe';this.x = options.x || Math.random() * w;this.y = options.y || Math.random() * h;this.width = options.width || 2;this.direct = options.direct || Math.random() * Math.PI * 2;this.max = options.max || Math.round(Math.random() * 10 + 20);this.segments = [...new Array(this.max)].map(() => {return {direct: this.direct + (Math.PI * Math.random() * 0.2 - 0.1),length: Math.random() * 20 + 80,change: Math.random() * 0.04 - 0.02};});this.update = function(index, array) {this.segments.forEach(s => { (s.direct += s.change) && Math.random() > 0.96 && (s.change *= -1) });(this.lifespan > 0 && this.lifespan--) || this.remove(index, array);}this.render = function(ctx) {if (this.lifespan <= 0) return;ctx.beginPath();ctx.globalAlpha = this.lifespan / this.maxlife;ctx.strokeStyle = this.color;ctx.lineWidth = this.width;ctx.shadowBlur = 32;ctx.shadowColor = this.glow;ctx.moveTo(this.x, this.y);let prev = { x: this.x, y: this.y };this.segments.forEach(s => {const x = prev.x + Math.cos(s.direct) * s.length;const y = prev.y + Math.sin(s.direct) * s.length;prev = { x: x, y: y };ctx.lineTo(x, y);});ctx.stroke();ctx.closePath();ctx.shadowBlur = 0;const strength = Math.random() * 80 + 40;const light = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, strength); light.addColorStop(0, 'rgba(250, 200, 50, 0.6)');light.addColorStop(0.1, 'rgba(250, 200, 50, 0.2)');light.addColorStop(0.4, 'rgba(250, 200, 50, 0.06)');light.addColorStop(0.65, 'rgba(250, 200, 50, 0.01)');light.addColorStop(0.8, 'rgba(250, 200, 50, 0)');ctx.beginPath();ctx.fillStyle = light;ctx.arc(this.x, this.y, strength, 0, Math.PI * 2);ctx.fill();ctx.closePath();}this.remove = function(index, array) {array.splice(index, 1);}}粒⼦组合告⽩⽂字特效效果展⽰:代码展⽰:;(function(main) {var args = {};window.onload = function() {main(args);};})(function(args) {'use strict';var Box = function(x, y, w, h, s) {this.x = x;this.y = y;this.w = w;this.h = h;this.s = s;this.a = Math.random() * Math.PI * 2;this.hue = Math.random() * 360;};Box.prototype = {constructor: Box,update: function() {this.a += Math.random() * 0.5 - 0.25;this.x += Math.cos(this.a) * this.s;this.y += Math.sin(this.a) * this.s;this.hue += 5;if(this.x > WIDTH) this.x = 0;else if(this.x < 0) this.x = WIDTH;if(this.y > HEIGHT) this.y = 0;else if(this.y < 0) this.y = HEIGHT;},render: function(ctx) {ctx.save();ctx.fillStyle = 'hsla(' + this.hue + ', 100%, 50%, 1)';ctx.translate(this.x, this.y);ctx.rotate(this.a);ctx.fillRect(-this.w, -this.h / 2, this.w, this.h);ctx.restore();}};var Circle = function(x, y, tx, ty, r) {this.x = x;this.y = y;this.ox = x;this.oy = y;this.tx = tx;this.ty = ty;this.lx = x;this.ly = y;this.r = r;this.br = r;this.a = Math.random() * Math.PI * 2;this.sx = Math.random() * 0.5;this.sy = Math.random() * 0.5;this.o = Math.random() * 1;this.delay = Math.random() * 200;this.delayCtr = 0;this.hue = Math.random() * 360;};⼩熊拉⼿CSS3情⼈节动画表⽩特效效果展⽰:代码展⽰:<div class="stage"><div class="couple"><div class="heart floating"></div><div class="bear he"><div class="ear--1"></div><div class="ear--2"></div><div class="arm--1"></div><div class="arm--2"></div><div class="hand"></div><div class="body"></div><div class="muzzle"></div><div class="eye--1"></div><div class="eye--2"></div><div class="nose"></div><div class="mouth"></div><div class="leg--1"></div><div class="leg--2"></div></div><div class="bear she"><div class="ear--1"></div><div class="ear--2"></div><div class="arm--1"></div><div class="arm--2"></div><div class="body"></div><div class="muzzle"></div><div class="eye--1"></div><div class="eye--2"></div><div class="nose"></div><div class="mouth"></div><div class="leg--1"></div><div class="leg--2"></div></div></div></div>到此这篇关于七个基于JavaScript实现的情⼈节表⽩特效的⽂章就介绍到这了,更多相关JavaScript表⽩特效内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。
JavaScript实现图像轮播特效教程
JavaScript实现图像轮播特效教程章节一：引言在现代网页设计中，图像轮播特效是非常常见的元素之一。
通过图像轮播特效，可以使网页更加动态、吸引人，提升用户体验。
本教程将介绍如何使用JavaScript实现图像轮播特效，并提供详细的步骤和示例代码。
章节二：基本结构首先，我们需要准备好轮播图的基本结构。
在HTML文件中，创建一个容器元素，用于包裹轮播图的图片和导航按钮。
然后，给容器元素添加一个唯一的ID，方便在JavaScript中进行操作。
章节三：样式设计接下来，我们需要为轮播图的容器元素和其中的图片设置样式。
使用CSS，可以设置容器元素的宽度和高度，以及图片的显示方式和过渡效果。
通过设置适当的样式，可以使轮播图在页面中居中显示，并可以根据需要进行自定义的设计。
章节四：添加JavaScript代码再接下来，我们需要使用JavaScript编写轮播图的逻辑代码。
首先，使用DOM操作获取到容器元素和其中的图片元素。
然后，使用数组或者类数组对象保存每张图片的路径或地址。
接下来，定义一个变量来存储当前显示的图片的索引。
然后，编写一个函数来实现图像切换的效果。
在函数中，通过改变图片元素的样式或属性，实现图片的切换。
同时，更新当前显示的图片的索引，以便进行下一次切换。
章节五：自动轮播功能除了手动切换图片，我们还可以添加自动轮播的功能。
使用JavaScript的定时器函数，可以定期触发图片切换的函数。
通过设置合适的时间间隔，可以实现自动轮播的效果。
同时，需要添加鼠标移入和移出事件，以便在用户鼠标悬停在图片上时停止轮播，鼠标离开时继续轮播。
章节六：导航按钮如果希望用户可以通过导航按钮来手动控制轮播图的切换，我们还需要添加导航按钮的功能。
在HTML文件中，创建相应数量的导航按钮，并为每个按钮设置一个特定的类名或索引属性。
在JavaScript中，使用事件委托的方式，监听导航按钮的点击事件。
当用户点击某个导航按钮时，获取该按钮的索引，然后调用图片切换函数，显示对应索引的图片。
js案例大全
js案例大全JavaScript（简称JS）是一种高级的、解释型的编程语言，它主要用于在网页上实现动态交互效果。
在网页开发中，JavaScript扮演着非常重要的角色，它可以帮助我们实现各种各样的功能和效果。
在本文中，我将为大家介绍一些常见的JavaScript案例，希望能够对大家的学习和工作有所帮助。
首先，我们来看一个简单的JavaScript案例，实现一个简单的计算器。
在这个案例中，我们可以使用JavaScript来编写一个简单的计算器，用户可以在网页上输入数字和运算符，然后点击“计算”按钮，就可以得到计算结果。
这个案例可以帮助我们了解如何使用JavaScript来处理用户的输入，并进行简单的数学运算。
接下来，我们可以看一个更加复杂的案例，实现一个图片轮播效果。
在这个案例中，我们可以使用JavaScript和CSS来实现一个图片轮播效果，用户可以在网页上点击“上一张”和“下一张”按钮来切换图片，也可以自动播放图片。
这个案例可以帮助我们了解如何使用JavaScript来操作DOM元素，以及如何结合CSS来实现动态效果。
除此之外，JavaScript还可以用来实现表单验证、动态加载数据、实现动画效果等等。
在网页开发中，JavaScript的应用非常广泛，它可以帮助我们实现各种各样的交互效果，让网页变得更加生动和有趣。
总的来说，JavaScript是一种非常强大的编程语言，它可以帮助我们实现各种各样的功能和效果。
通过学习和掌握JavaScript，我们可以为网页添加更多的交互效果，让用户体验变得更加丰富和多样化。
希望本文介绍的JavaScript案例能够对大家有所帮助，也希望大家能够在日常的网页开发中多多运用JavaScript，为用户带来更好的体验。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JavaScript图形实例：蝴蝶结图案
1．长短瓣相间的蝴蝶结
设定曲线的坐标方程为：
b=r*(1+cos(n*θ)/4)*(1+sin(2*n*θ));
x1=b*cos(θ);
x2=b*cos(θ+π/8);
y1=b*Math.sin(θ);
y2=b*Math.sin(θ+π/8); （0≤θ≤2π，2≤n≤5）
在0~2π区间中从θ=0开始，每隔π/360按曲线方程求得两个点的坐标值(x1,y1)和(x2,y2)，并将求得的两点连成一条线段，这样，可以得到一个长短瓣相间的蝴蝶结图案。
编写如下的HTML代码。
<!DOCTYPE html>
<head>
<title>长短瓣相间的蝴蝶结</title>
<script type="text/javascript">
function draw(id)
{
var canvas=document.getElementById(id);
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
context.strokeStyle="red";
context.lineWidth=1;
context.beginPath();
var n=3;
for (theta=0;theta<=2*Math.PI;theta+=Math.PI/360)
{
e=60*(1+Math.cos(n*theta)/4);
f=e*(1+Math.sin(2*n*theta));
x1=200+f*Math.cos(theta);
x2=200+f*Math.cos(theta+Math.PI/8);
y1=150-f*Math.sin(theta);
y2=150-f*Math.sin(theta+Math.PI/8);
context.moveTo(x1,y1);
context.lineTo(x2,y2);
}
context.closePath();
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
</html>
将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML 代码的html文件，可以看到在浏览器窗口中绘制出的长短各三瓣相间的蝴蝶结图案，如图1所示。
图1 长短各三瓣相间的蝴蝶结
若将上面代码中的“var n=3;”改写为“var n=2;”或“var n=4;”在在浏览器窗口中会分别绘制出的长短各两瓣或长短各四瓣相间的蝴蝶结图案，如图2和图3所示。
图2 长短各两瓣相间的蝴蝶结
图3 长短各四瓣相间的蝴蝶结
还可以将上面求取坐标的三角函数加上不同的相位，例如将代码中的语句
“y1=150-f*Math.sin(theta);”改写为“y1=150-f*Math.sin(theta+Math.PI/4);”，则在画布中绘制的图案如图4所示。
图4 Y1中SIN函数加上相位后绘制的图案
2．长短瓣相间的蝴蝶结的绘制过程
将长短瓣相间的蝴蝶结的绘制过程进行动态展示，编写的HTML文件内容如下。
<!DOCTYPE html>
<head>
<title>长短瓣相间的蝴蝶结绘制过程的动态展示</title>
<script type="text/javascript">
var context;
var n;
var theta;
function draw(id)
{
var canvas = document.getElementById(id);
if (canvas == null)
return false;
context = canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
n=2;
theta=0;
setInterval(go,30);
}
function go()
{
context.strokeStyle="red";
context.lineWidth=1;
context.beginPath();
e=60*(1+Math.cos(n*theta)/4);
f=e*(1+Math.sin(2*n*theta));
x1=200+f*Math.cos(theta);
x2=200+f*Math.cos(theta+Math.PI/8);
y1=150-f*Math.sin(theta);
y2=150-f*Math.sin(theta+Math.PI/8);
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.closePath();
context.stroke();
theta+=Math.PI/360;
if (theta>2*Math.PI)
{
n++; if (n>5) n=2;
theta=0;
context.clearRect(0,0,400,300);
}
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300" style="border:3px double #996633;"> </canvas>
</body>
</html>
将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML 代码的html文件，可以看到在浏览器窗口中呈现出长短相间的蝴蝶结图案从各两瓣到三瓣再到四瓣直到五瓣的绘制过程，如图5所示。
图5 长短瓣相间的蝴蝶结绘制过程的动态展示。