JavaScript多种图形实现代码实例
1．小星星
设有如下的曲线参数方程：
N=5
x = r*sin(nθ)*cos(θ)
y = r*sin(nθ)*sin(θ) （0≤θ≤2π）
用循环依次取θ值为0~2π（每次增量为π/64），计算出X和Y,在canvas画布中将坐标点（X,Y）用线连起来，可绘制出一个一个5瓣花卉图案。
编写如下的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="blue";
context.lineWidth=2;
context.beginPath();
var r=120; // 下面可进行修改的语句 （3）
var n=5; // 下面可进行修改的语句 （3）
for (theta=0;theta<=2*Math.PI;theta+=Math.PI/64)
{
b=r*Math.sin(n*theta); // 下面可进行修改的语句 （3）
x=200+b*Math.cos(theta);
y=150+b*Math.sin(theta);
if (theta==0)
context.moveTo(x,y);
else
context.lineTo(x,y);
}
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
</html>
将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图1所示的5瓣花卉图案。
图1 5瓣花卉图案1
我们将上面程序中标识的语句1“var r=120;”修改为“var r=50;”，适当减小初始半径，使得绘制的图案不会超出画布的范围，在将标识的语句3“b=r*Math.sin(n*theta);”修改为“b=r*(1+Math.sin(n*theta)/2);”，则在画布中绘制出如图2所示的5瓣花卉图案。
图2 5瓣花卉图案2
这个图案比图1中的图案的感觉是中间向外扩展了，使得中心部位出现空白。再次修改语句3为“b=r*(2+Math.sin(n*theta)/2);”，以增大中间部分的空白，则在画布中绘制出如图3所示的图案，像小星星吗？
图3 小星星图案
上面程序中的n值也可修改，例如在上面绘制小星星图案的程序中，将标识语句2
“var n=5;”修改为“var n=6;”，则在画布中绘制出如图4所示的图案。像六角雪花图案吗？
图4 六角雪花图案
我们这样想一想，若将n的值修改为一个实数（有小数部分）会这样呢？例如，将
“var n=5;”修改为“n=5.05;”，则在画布中绘制出如图5所示的图案。
图5 未封闭的小星星图案线
2．环带
由图5知，θ值取0~2π时，正好绘制一圈，由于n取非整数时，曲线不封闭，因此，若取θ值为0~10π，绘制5圈，可得到一个环带图案。为读者引用和下面讲述方便，给出完整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=2;
context.beginPath();
var n=5.05;
k=10;
for (theta=0;theta<=k*Math.PI;theta+=Math.PI/120)
{
var r=110*(1+Math.cos(n*theta)/5);
var x =200+ r*Math.cos(theta);
var y =150+ r*Math.sin(theta);
if (theta==0)
context.moveTo(x,y);
else
context.lineTo(x,y);
}
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制的五角环带，如图6所示。
图6 五角环带
将上面程序中的n值由“n=5.05”修改为“n=9.05”，则在画布中绘制出如图7所示的环带。
图7 九角环带
若将上面程序中的n值修改为9.2，且将k值修改为12，则在画布中绘制出如图8所示的圆环带。
图8 n值为9.2时的圆环
若将上面程序中的n值修改为5.5，且将k值修改为12，则在画布中绘制出如图9所示的圆环。
图9 n值为5.5时的圆环
在绘制图9的程序中，再将语句“var r=110*(1+Math.cos(n*theta)/5);”修改为
“var r=90*(1+Math.cos(n*theta)/2);”则在画布中绘制出如图10所示的图案。
图10 n值为5.5时的另一环状图案
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
d3.js实现图形拖拽
本文实例为大家分享了d3.js图形拖拽的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽操作</title> </head> <body> <script src = "d3.js"></script&g
-
JavaScript生成图形验证码
本文实例为大家分享了js生成图形验证码的具体代码,供大家参考,具体内容如下 getGVerify:function (id) { function GVerify(options) { //创建一个图形验证码对象,接收options对象为参数 this.options = { //默认options参数值 id: "", //容器Id canvasId: "verifyCanvas", //canvas的ID width: "100", //默认
-
JS制作图形验证码实现代码
第一步我们来到要展示验证码的页面,当我们按下营业执照的时候让其,弹出一个弹框,弹框的上面就是验证码,如图一所示: (图一) 弹框的样式如图二所示: (图二) 我们要对验证码的值进行校验,判断验证码是否输入正确,当输入不正确的时候,我们提示错误信息,提示信息如图三所示: (图三) 如果页面了验证正确,这不会提示错误信息并且调到我们的目标页面,如图四所示: (图四) 路由层描述 /** 供货商店铺-店铺简介 */ //1-在路由层进行设置,页面跳转到根目录下/buyer/vshop/info.ejs
-
JavaScript实现使用Canvas绘制图形的基本教程
由于这两年HTML5火的正热,所以研究了一下,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用. 1.使用Canvas绘制直线: <!doctype html> <html> <head> <meta charset="UTF-8"> </head> <style ty
-
使用p5.js临摹动态图形
一.临摹 最近正在学习用代码绘图,于是按照下面的动态图形自己临摹了一幅图形 临摹结果 观察发现,整个图案都是由基础的正六边形组成 首先创建一个画布 function setup() { createCanvas(400, 400); } 画六边形的函数为 function polygon(x, y, radius, npoints) {//绘制正多边形函数 let angle = TWO_PI / npoints; beginShape(); for (let a = 0; a < TWO_PI
-
Three.js的使用及绘制基础3D图形详解
一. 前言 Three.js 是一款 webGL(3D绘图标准,在此不赘述)引擎,可以运行于所有支持 webGL 的浏览器.Three.js 封装了 webGL 底层的 API ,为我们提供了高级的开发接口,可以使用简单的代码去实现 3D 渲染.(官网:https://threejs.org/) 二. 为什么要选择Three.js? Three.js 作为原生 web3D 引擎,对插件式 web3D 引擎的优势不言而喻:不需要安装插件.在移动端支持好. Three.js 与其他原生 web3D
-
p5.js实现动态图形临摹
p5.js实现动态图形临摹的具体代码,供大家参考,具体内容如下 临摹的动态图形 对于动态图形临摹主要在于从图形中寻找规律,包括颜色变化.空间变化.几何关系.数学规律等等,把握规律之后才可以还原图形,同时,添加新的规律也会出现不一样的效果. 观察规律 1.空间分布:整体由5行5列形状大小相同的圆构成 2.颜色规律:在与对角线平行的同一线上的所有小球颜色相同 3.单个圆动态变化规律:逐渐被掩盖后又逐渐出现,掩盖过程为匀速过程 4.整体动态变化规律:自右上到左下依次进行个体的动态变化,在与对角线平行的
-
JavaScript多种图形实现代码实例
1．小星星 设有如下的曲线参数方程: N=5 x = r*sin(nθ)*cos(θ) y = r*sin(nθ)*sin(θ) (0≤θ≤2π) 用循环依次取θ值为0~2π(每次增量为π/64),计算出X和Y,在canvas画布中将坐标点(X,Y)用线连起来,可绘制出一个一个5瓣花卉图案. 编写如下的HTML代码. <!DOCTYPE html> <head> <title>小星星</title> <script type="text/ja
-
原生JavaScript实现日历功能代码实例(无引用Jq)
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 成品显示,可左右切换月份 html 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi
-
基于JavaScript伪随机正态分布代码实例
这篇文章主要介绍了基于JavaScript伪随机正态分布代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在游戏开发中经常遇到随机奖励的情况,一般会采取先生成数组,再一个一个取的方式发随机奖励. 下面是js测试正态分布代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti
-
通过javascript实现扫雷游戏代码实例
这篇文章主要介绍了通过javascript实现扫雷游戏代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 html代码: <div id="mine"> <div class="level"> <button type="button">初级</button> <button type="button">中级&l
-
Javascript Worker子线程代码实例
这篇文章主要介绍了Javascript Worker子线程代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 main.js code: //创建 var worker = new Worker("./worker.js"); //发送 worker.postMessage(1); //接收 worker.onmessage = (e)=>{ console.log("main.js:"); consol
-
Javascript原生ajax请求代码实例
这篇文章主要介绍了Javascript原生ajax请求代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 class Ajax{ constructor(url, method, data, callback_suc, callback_err, callback_run){ this.RT = true;//默认为异步请求 this.url = url; this.method = method || "POST";
-
javascript里使用php代码实例
本文实例讲述了javascript里使用php代码的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <script type="text/javascript" > <?php if (!empty($searchResult)):?> $.searchModule.init({display:<?php echo MAX_KEYWORDS_DISPLAY_COUNT; ?>, mode:<?php echo $searc
-
JavaScript实现身份证验证代码实例
这篇文章主要介绍了JavaScript实现身法证验证代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 function isIdCardNo(num) { num = num.toUpperCase(); //身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X. if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(num))) { //alert(
-
Javascript随机标签云代码实例
先来看一下效果 代码如下 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>随机标签云</title> <style type="text/css"> *{ margin:0; padding:0 } a{ text-decoration:none } #wrap{ width:400px; margin:auto
-
javascript 获取网页标题代码实例
复制代码 代码如下: <!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><meta http-equiv="