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时的另一环状图案

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-06-27

使用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

JavaScript实现使用Canvas绘制图形的基本教程

由于这两年HTML5火的正热,所以研究了一下,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用. 1.使用Canvas绘制直线: <!doctype html> <html> <head> <meta charset="UTF-8"> </head> <style ty

JS制作图形验证码实现代码

第一步我们来到要展示验证码的页面,当我们按下营业执照的时候让其,弹出一个弹框,弹框的上面就是验证码,如图一所示: (图一) 弹框的样式如图二所示: (图二) 我们要对验证码的值进行校验,判断验证码是否输入正确,当输入不正确的时候,我们提示错误信息,提示信息如图三所示: (图三) 如果页面了验证正确,这不会提示错误信息并且调到我们的目标页面,如图四所示: (图四) 路由层描述 /** 供货商店铺-店铺简介 */ //1-在路由层进行设置,页面跳转到根目录下/buyer/vshop/info.ejs

p5.js实现动态图形临摹

p5.js实现动态图形临摹的具体代码,供大家参考,具体内容如下 临摹的动态图形 对于动态图形临摹主要在于从图形中寻找规律,包括颜色变化.空间变化.几何关系.数学规律等等,把握规律之后才可以还原图形,同时,添加新的规律也会出现不一样的效果. 观察规律 1.空间分布:整体由5行5列形状大小相同的圆构成 2.颜色规律:在与对角线平行的同一线上的所有小球颜色相同 3.单个圆动态变化规律:逐渐被掩盖后又逐渐出现,掩盖过程为匀速过程 4.整体动态变化规律:自右上到左下依次进行个体的动态变化,在与对角线平行的

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", //默认

asp.net使用ashx生成图形验证码的方法示例

本文实例讲述了asp.net使用ashx生成图形验证码的方法.分享给大家供大家参考,具体如下: 验证码的好处不用我多说,你们都懂的.我在网上看到有人把验证码直接写在aspx页面里,也就是说这种方式请求验证码等于请求一个页面,这样做很不科学.如下所示 <form id="form1" runat="server"> <div> <asp:Image ID="Image1" runat="server"

ASP.NET生成图形验证码的方法详解

本文实例讲述了ASP.NET生成图形验证码的方法.分享给大家供大家参考,具体如下: 通常生成一个图形验证码主要 有3个步骤: (1)随机产生一个长度为N的随机字符串,N的值可由开发可由开发人员自行设置.该字符串可以包含数字.字母等. (2)将随机生成的字符串创建成图片,并显示. (3)保存验证码. 新建一个页面为default.aspx,  放置一个TextBox控件和一个Image控件,TextBox控件用于输入生成的字符串,Image控件用于显示字符串,它的图片就为生成的图形验证码image

PHP5中GD库生成图形验证码(有汉字)

利用PHP5中GD库生成图形验证码 类似于下面这样 1.利用GD库函数生成图片,并在图片上写指定字符 imagecreatetruecolor 新建一个真彩色图像 imagecolorallocate 为一幅图像分配颜色(调色板) imagestring 绘制字符 imageline 绘制线条 imagesetpixel 打像素点 2.输出图片 imagejpeg($img); PHP实现过程,代码中注释详细,这里不做过多解释 verify.php 复制代码 代码如下: <?php //1.qi

Java生成图形验证码工具类

生成验证码效果 ValidateCode.java 验证码生成类 package cn.dsna.util.images; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.FileOutputStream; import java.io.IOException; import java.io.Ou

Javascript 制作图形验证码实例详解

js 图形验证码制作 实际效果 第一步我们来到要展示验证码的页面,当我们按下营业执照的时候让其,弹出一个弹框,弹框的上面就是验证码,如图一所示: (图一) 弹框的样式如图二所示: (图二) 我们要对验证码的值进行校验,判断验证码是否输入正确,当输入不正确的时候,我们提示错误信息,提示信息如图三所示: (图三) 如果页面了验证正确,这不会提示错误信息并且调到我们的目标页面,如图四所示: (图四) --–营业执照页面为私密页面,使用其他页面代替原图. 路由层描述 //1-在路由层进行设置,页面跳转到

python 生成图形验证码的方法示例

日常在网站使用过程中经常遇到图形验证,今天准备自己做个图形验证码,这算是个简单的功能,也适合新手练习的,便于自己学习. 主要用到的库--PIL图像处理库,简单的思路,我们需要随机的颜色,随机的数字或字母,随机的线条.点作为干扰元素 拼凑成一张图片. 生成随机颜色,返回的是rgb三色. def getRandomColor(): r = random.randint(0, 255) g = random.randint(0, 255) b = random.randint(0, 255) retu

php生成图形验证码几种方法小结

我们先来检查一下自己的php是不是打开了gd库. 复制代码 代码如下: <?phpif(extension_loaded('gd')) {  echo '你可以使用gd<br>';  foreach(gd_info() as $cate=>$value)    echo "$cate: $value<br>";}else  echo '你没有安装gd扩展';?> 如果有返回信息就正确可以常用使用了例1 复制代码 代码如下: <?php/*

JavaScript生成随机验证码代码实例

利用canvas制作一个随机验证码: 1.clearRect:context.clearRect(x,y,width,height);清空给定矩形内的指定像素 2.fillStyle:设置画笔的颜色 3.rotate(deg):旋转角度,以弧度旋转(弧度=degrees*Math.PI/180 ) 4.translate(): 方法重新映射画布上的位置 5.Math.random():获取0-1之间的一个随机数,不包含1 <!-- HTML --> <!DOCTYPE html>

Java Web开发之图形验证码的生成与使用方法

本文实例讲述了Java Web开发之图形验证码的生成与使用方法.分享给大家供大家参考.具体如下: 图形验证码的主要目的是为了增强的安全性,增加用户通过遍历所有可能性来破解密码的难度. 图形验证码的使用包括如下3部分: ① 图形验证码的生成: ② 在页面中的使用: ③ 验证: 1.图形验证码的生成 假设在Servlet生成图形验证码,在JavaBean或者JSP中生成的基本过程是相同的.设计如下过程: ① 设置响应的文档类型: ② 生成随机码: ③ 把随机码保存到session中: ④ 生成图片: