JavaScript图形实例:纺织物图案

1.简单纺织物图案

先在HTML页面中设置一个画布。

<canvas id="myCanvas" width="360" height="240">

</canvas>

再在定义的这块360*240的canvas(画布)上面用二重循环绘制纺织物图案。

绘制图案的基本思想是:将画布分成6行8列的子块,即每个子块的宽度为60,高度为30。在每个子块中按规律交错地绘制11条横线或21条竖线。

可编写如下的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 i=0,j=0;

for (px=0;px<360;px+=60)

{

i++;

for (py=0; py<240; py+=30)

{

j=j%6+1;

if (i%2==j%2)

{

for (k=0;k<=30;k+=3)

{

context.moveTo(px,py+k);

context.lineTo(px+60,py+k);

}

}

else

{

for (k=0;k<=60;k+=3)

{

context.moveTo(px+k,py);

context.lineTo(px+k,py+30);

}

}

}

}

context.closePath();

context.stroke();

}

</script>

</head>

<body >

<canvas id="myCanvas" width="360" height="240">您的浏览器不支持canvas!

</canvas>

</body>

</html>

将上述HTML代码保存到一个html文本文件中,再在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中绘制出如图1所示的简单纺织物图案。

图1  简单纺织物图案

由图1看出,在简单纺织物图案中,每个小块之间的分割线条很明显。若将JavaScript程序中的循环语句“for (k=0;k<=30;k+=3)”改写为“for (k=0;k<30;k+=3)”,即如果绘制横线,只绘制10条;再将循环语句“for (k=0;k<=60;k+=3)”改写为for (k=0;k<60;k+=3),即如果绘制竖线,只绘制20条。再在浏览器中打开修改后的HTML文件,显示出一个具有凸凹效果的纺织物图案,如图2所示。

图2 具有凸凹效果的纺织物图案

2.按三角函数分布的纺织物图案

上面的纺织物图案比较简单,不管是横线还是竖线,直线间间隔均为3,能否将直线的绘制间隔按某种规律分布呢?考虑采用三角函数计算直线的分布间隔,可重新编写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 i=0,j=0;

for (px=0;px<360;px+=60)

{

i++;

for (py=0; py<240; py+=30)

{

j=j%6+1;

if (i%2==j%2)

{

for (k=0;k<=15;k++)

{

y=30-30*Math.sin(k*Math.PI/15);

context.moveTo(px,py+y);

context.lineTo(px+60,py+y);

}

}

else

{

for (k=0;k<=25;k++)

{

x=30-30*Math.cos(k*Math.PI/25);

context.moveTo(px+x,py);

context.lineTo(px+x,py+30);

}

}

}

}

context.closePath();

context.stroke();

}

</script>

</head>

<body >

<canvas id="myCanvas" width="360" height="240">您的浏览器不支持canvas!

</canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中绘制出如图3所示的纺织物图案。

图3  按三角函数分布的纺织物图案

原文地址:https://www.cnblogs.com/cs-whut/p/12061467.html

时间: 2024-10-07 08:20:49

JavaScript图形实例:纺织物图案的相关文章

JavaScript图形实例:四瓣花型图案

设有坐标计算公式如下: X=L*(1+SIN(4α))*COS(α) Y=L*(1+SIN(4α))*SIN(α) 用循环依次取α值为0~2π,计算出X和Y,在canvas画布中对坐标位置(X,Y)描点,可绘制出一个曲线图形.编写HTML文件内容如下: <!DOCTYPE html> <head> <title>曲线图形</title> <script type="text/javascript"> function draw

JavaScript图形实例:图形的旋转变换

旋转变换:图形上的各点绕一固定点沿圆周路径作转动称为旋转变换.可用旋转角表示旋转量的大小. 旋转变换通常约定以逆时针方向为正方向.最简单的旋转变换是以坐标原点(0,0)为旋转中心,这时,平面上一点P(x,y) 旋转了θ之后,变成点P’(x,y) ,如图1所示. 图1 点P逆时针旋转 由三角关系可得: 平面上一点P(x,y)若按顺时针方向旋转了θ之后,变成点P’(x,y) ,如图2所示. 图2 点P顺时针旋转 由三角关系可得: 1.三角形旋转 先绘制一个三角形,然后将该三角形依次顺时针旋转45°,

JavaScript图形实例:正弦曲线

正弦曲线的坐标方程为: Y=A*SIN(X)    (A为振幅) 1.正弦曲线 在弧度为0~4π的正弦曲线上取360个点,将这些点用线连接起来,可以绘制出正弦曲线.编写如下的HTML代码. <!DOCTYPE html> <head> <title>正弦曲线的绘制</title> <script type="text/javascript"> function draw(id) { var canvas=document.ge

JavaScript图形实例:七彩线团

1.线团图案 设立坐标计算公式为: X=R1*COS(3α)+R2*COS(14α)) Y=R1*SIN(3α)+R2 *SIN(14α)) 再用循环依次取α值为0~2π(每次增量为0.01),计算出X和Y,在canvas画布中将坐标点(X,Y)用线连起来,可绘制出一个封闭曲线图形,可得到一个线团图案. 编写如下的HTML代码. <!DOCTYPE> <html> <head> <title>线团</title> </head> &l

JavaScript图形实例:五角星

1.五角星 在半径为80的圆周上取5个点,用这5个点依次首尾连接画5条线,可以绘制出一个五角星图案. 编写如下的HTML代码. <!DOCTYPE html> <head> <title>五角星(一)</title> <script type="text/javascript"> function draw(id) { var canvas=document.getElementById(id); if (canvas==nu

JavaScript动画实例:李萨如曲线

在“JavaScript图形实例:阿基米德螺线”和“JavaScript图形实例:曲线方程”中,我们学习了利用曲线的方程绘制曲线的方法.如果想看看曲线是怎样绘制出来的,怎么办呢?编写简单的动画,就可以展示指定曲线的绘制过程. 1.李萨如曲线 设定李萨如曲线的坐标方程为: X=SIN(2θ) Y=SIN(3θ)     (0≤θ≤2π) 将0~2π区间等分512段,取θ的初始值π/256,按曲线方程求得坐标值(x,y),并在当前坐标处通过绘制一个实心圆的方式描点.之后每隔0.02秒,将θ的初始值加

Win10系列:JavaScript综合实例1

上面几个小节讲解了使用HTML5和JavaScript语言开发Windows 应用商店应用时会用到的一些技术,本小节将前面介绍的知识融合在一起创建一个菜谱应用程序,帮助读者更进一步地理解和掌握这些知识. 此菜谱应用程序主要的功能是介绍一些菜肴和主食的做法,其中包含三个页面:第一个页面为主页面,用于按类别显示一些菜肴和主食:第二个页面为分类页面,显示某个类别的信息和属于该类别的菜肴或主食:第三个页面为菜肴页面,显示某项菜肴或主食的详细信息,如名称.图片和具体做法.这三个页面可以相互跳转,例如,在主

编写自己的代码库(javascript常用实例的实现与封装)

编写自己的代码库(javascript常用实例的实现与封装) 1.前言 大家在开发的时候应该知道,有很多常见的实例操作.比如数组去重,关键词高亮,打乱数组等.这些操作,代码一般不会很多,实现的逻辑也不会很难,下面的代码,我解释就不解释太多了,打上注释,相信大家就会懂了.但是,用的地方会比较,如果项目有哪个地方需要用,如果重复写的话,就是代码沉余,开发效率也不用,复用基本就是复制粘贴!这样是一个很不好的习惯,大家可以考虑一下把一些常见的操作封装成函数,调用的时候,直接调用就好!源码都放在githu

10种JavaScript特效实例让你的网站更吸引人

我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预置好的脚本或那种从头开始开发的创建者.这篇文章适合那些打算提高工作效率或不愿意从头开发脚本的人阅读. 您还可以参考以下JavaScript/Ajax相关教程及资源:<10个非常棒的Ajax及Javascript实例资源网站><12种Javascript解决常见浏览器兼容问题的方法>&l