1. 基本四瓣花型图案

根据四瓣花卉线的参数方程:

t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2);

x=t*cos(θ));

y=t*sin(θ));

编写如下的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,320,320);

context.strokeStyle="blue";

context.lineWidth=1;

var dig=Math.PI/64;

context.beginPath();

for (var i=0;i<=128;i++)

{

d=120*(1+Math.sin(12*i*dig)/5);

t=d*(0.5+Math.sin(4*i*dig)/2);

x=(160+t*Math.cos(i*dig));

y=(160+t*Math.sin(i*dig));

if (i==0)

context.moveTo(x,y);

else

context.lineTo(x,y);

}

context.stroke();

}

</script>

</head>

<body onload="draw('myCanvas');">

<canvas id="myCanvas" width="320" height="320"></canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件,可以看到在画布中绘制出如图1所示的四瓣花卉线图案。

图1  四瓣花卉线图案

2.平铺的100朵四瓣花

用一个二重循环将图1的四瓣花卉绘制10行10列共100朵。编写的HTML文件内容如下。

<!DOCTYPE html>

<head>

<title>平铺的100朵四瓣花</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,320,320);

context.strokeStyle="blue";

context.lineWidth=1;

var dig=Math.PI/64;

context.beginPath();

for (px=20;px<320;px+=30)

for (py=20;py<320;py+=30)

{

for (var i=0;i<=128;i++)

{

d=20*(1+Math.sin(12*i*dig)/5);

t=d*(0.5+Math.sin(4*i*dig)/2);

x=px+t*Math.cos(i*dig);

y=py+t*Math.sin(i*dig);

if (i==0)

context.moveTo(x,y);

else

context.lineTo(x,y);

}

context.stroke();

}

}

</script>

</head>

<body onload="draw('myCanvas');">

<canvas id="myCanvas" width="320" height="320"></canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件,可以看到在画布中绘制出如图2所示的平铺的100朵四瓣花卉图案。

图2  平铺的100朵四瓣花卉图案

3.放大镜看平铺的四瓣花

将图2图形中位于中心点周围100以内的点的坐标进行球面镜反射变换,可以实现放大镜效果。编写的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,320,320);

context.strokeStyle="blue";

context.lineWidth=1;

var dig=Math.PI/64;

context.beginPath();

var r=140;

var x0=160;

var y0=160;

for (px=20;px<320;px+=30)

for (py=20;py<320;py+=30)

{

for (var i=0;i<=128;i++)

{

d=20*(1+Math.sin(12*i*dig)/5);

t=d*(0.5+Math.sin(4*i*dig)/2);

x=px+t*Math.cos(i*dig);

y=py+t*Math.sin(i*dig);

l=Math.sqrt((x-x0)*(x-x0)+(y-y0)*(y-y0));

if (l<r)

{ // 圆心为(160,160),半径为140的圆内各点进行球面镜反射变换

s=x-x0<0?-1:1;

if (x-x0==0)  x=x0+0.1;

bt=2*Math.atan(l/r);

th=Math.atan((y-y0)/(x-x0));

m=r*Math.sin(bt);

x=s*m*Math.cos(th)+x0;

y=s*m*Math.sin(th)+y0;

}

if (i==0)

context.moveTo(x,y);

else

context.lineTo(x,y);

}

context.stroke();

}

}

</script>

</head>

<body onload="draw('myCanvas');">

<canvas id="myCanvas" width="320" height="320"></canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件,可以看到在画布中绘制出如图3所示的图形放大镜效果1。

图3  图形放大镜效果1

上面程序中语句var r=140;、var x0=160;和var y0=160;用于设置放大镜的圆心坐标和半径。若修改r=100,x0=100,y0=100,则在画布中绘制出如图4所示的图形放大镜效果2。

图4  图形放大镜效果2

JavaScript图形实例:图形放大镜效果的更多相关文章

  1. JavaScript实现的网页放大镜效果

    今天在观看视频学习的时候,学到了一个小技巧.就拿过来与大家进行分享一下啦. 实现的原理 分析需求:需要两张图,一大一小.然后根据鼠标的动作显示出不同的区域块的图像. 核心:鼠标事件的获取和处理.图片显 ...

  2. 用JavaScript中jQuery编写放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JavaScript仿淘宝实现放大镜效果的实例

    我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...

  4. JavaScript图形实例:线段构图

    在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段 ...

  5. JavaScript图形实例:再谈IFS生成图形

    在“JavaScript图形实例:迭代函数系统生成图形”一文中,我们介绍了采用迭代函数系统(Iterated Function System,IFS)创建分形图案的一些实例.在该文中,仿射变换函数W的 ...

  6. JavaScript图形实例:随机SierPinski三角形

    在“JavaScript图形实例:SierPinski三角形”中,我们介绍了SierPinski三角形的基本绘制方法,在“JavaScript图形实例:迭代函数系统生成图形”一文中,介绍了采用IFS方 ...

  7. 【JavaScript】放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JavaScript之放大镜效果2

    在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...

  9. JavaScript之放大镜效果

    在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...

随机推荐

  1. SSL/TLS/WTLS

    转载来自http://blog.csdn.net/fw0124/article/details/8470940 一 前言 首先要澄清一下名字的混淆: 1 SSL(Secure Socket Layer ...

  2. Java实现 蓝桥杯VIP 算法训练 拦截导弹

    1260:[例9.4]拦截导弹(Noip1999) 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 4063 通过数: 1477 [题目描述] 某国为了防御敌国的导弹袭击,发展出一 ...

  3. Java实现 蓝桥杯VIP 算法提高 交换Easy

    算法提高 交换Easy 时间限制:1.0s 内存限制:512.0MB 问题描述 给定N个整数组成的序列,每次交换当前第x个与第y个整数,要求输出最终的序列. 输入格式 第一行为序列的大小N(1< ...

  4. Java实现 蓝桥杯VIP 算法提高 去注释

    算法提高 去注释 时间限制:1.0s 内存限制:256.0MB 去注释 问题 给你一段C++代码,将其中的注释去除后输出剩余的代码. 注释共有两种形式: 1. 行注视:以//开头,一直作用到行尾为止. ...

  5. Linux文件搜索命令locate、which、grep详解

    命令locate详解 命令locate,其基本功能是在文件资料库中可以快速的搜索系统文件,占用系统资源很少,例如:locate my.cnf 还可以使用locate -i [文件名],不区分大小写进行 ...

  6. win7 64位系统怎么使用debug

    安装DOSbox软件 下载个debug.exe然后把这放到D盘或E盘的根目录下 然后启动dosbox软件,在下面输入 mount c d:\ enter键 c: enter键 输入debug命令就ok ...

  7. python—迭代器,生成器与for循环机制

    一:什么是迭代器协议 1.迭代器协议是指:对象必须提供一个next方法,执行该方法要么返回迭代器中的下一项,要么就引起一个stoplteration异常,以终止协议(只能往后走不能往前) 2.可迭代对 ...

  8. 第03组团队Git现场编程实战

    1.组员职责分工 张逸杰:复制监督整个编程任务的进程以及协助组员编程 黄智锋.刘汪洋:负责UI设计 苏凯婷.鲍冰如:爬取数据并负责测评出福州最受欢迎的商圈 陈荣杰.杨锦镔:爬取数据并负责测评出福州人均 ...

  9. CoordinatorLayout简介

    CoordinatorLayout简介 CoordinatorLayout的作用 协调子view的布局,降低子view之间的耦合度 CoordinatorLayout的使用 核心:Behavior,用 ...

  10. Node第三方模块

    node第三方模块集合 1.nrm 切换npm下载的镜像地址 nrm ls   查看可用镜像 nrm use +镜像名 2.nodemon 在控制台nodenom替代node命令执行nodejs文件, ...