1．椭圆型布纹图案

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

<canvas id="myCanvas" width="300" height="300" style="border:3px double #996633;">

</canvas>

再在定义的这块300*300的canvas（画布）上面用二重循环绘制布纹图案，绘制时，对每个像素点通过椭圆方程求值的方式决定该点的颜色。

可编写如下的HTML代码。

<!DOCTYPE html>

<html>

<head>

<title>椭圆型布纹图案</title>

</head>

<body>

<canvas id="myCanvas" width="300" height="300" style="border:3px double #996633;">

</canvas>

<script>

var canvas=document.getElementById('myCanvas');

var context=canvas.getContext('2d');

var colors = [ "red","orange", "yellow","green", "blue"];

for (x=0;x<=300;x++)

for (y=0;y<=300;y++){

context.fillText('.',x,y);

c=Math.floor((x-150)*(x-150)/25+(y-150)*(y-150)/36)%5;

context.fillStyle=colors[c];

}

</script>

</body>

</html>

其中，采用的椭圆方程为：

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出精美的椭圆形布纹图案，如图1所示。

图1  椭圆型布纹图案

2．双曲线型布纹图案

将前面的椭圆方程改写为双曲线方程，可重新编写的HTML代码如下。

<!DOCTYPE html>

<html>

<head>

<title>双曲线型布纹图案</title>

</head>

<body>

<canvas id="myCanvas" width="300" height="300" style="border:3px double #996633;">

</canvas>

<script>

var canvas=document.getElementById('myCanvas');

var context=canvas.getContext('2d');

var colors = [ "red","orange", "yellow","green", "blue"];

for (x=0;x<=300;x++)

for (y=0;y<=300;y++){

context.fillText('.',x,y);

c=Math.abs(Math.floor((x-150)*(x-150)/25-(y-150)*(y-150)/36))%5;

context.fillStyle=colors[c];

}

</script>

</body>

</html>

其中，采用的双曲线方程为：

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出精美的双曲线型布纹图案，如图4所示。

图4  双曲线型布纹图案

JavaScript图形实例：布纹图案的更多相关文章

  1. JavaScript图形实例：圆形图案

    在HTML5的Canvas 2D API中,可以调用arc方法绘制圆或圆弧.该方法调用格式为: context . arc(x, y, radius, startAngle, endAngle, an ...

  2. JavaScript图形实例：窗花图案

    1．窗花基本框线 设定曲线的坐标方程为: n=25; r=100; x=r/n*cos(5*θ)+r*cos(θ); y=r/n*sin(5*θ)+r*sin(θ);          (0≤θ≤2π ...

  3. JavaScript图形实例：线段构图

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

  4. JavaScript图形实例：再谈IFS生成图形

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

  5. JavaScript图形实例：随机SierPinski三角形

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

  6. JavaScript图形实例：迭代函数系统生成图形

    迭代函数系统(Iterated Function System,IFS)可以用来创建分形图案,它是分形理论的重要分支,也是分形图形处理中最富生命力而且最具有广阔应用前景的领域之一.这一工作最早可以追溯 ...

  7. JavaScript图形实例：四瓣花型图案

    设有坐标计算公式如下: X=L*(1+SIN(4α))*COS(α) Y=L*(1+SIN(4α))*SIN(α) 用循环依次取α值为0~2π,计算出X和Y,在canvas画布中对坐标位置(X,Y)描 ...

  8. JavaScript图形实例：平面镶嵌图案

    用形状.大小完全相同的一种或几种平面图形进行拼接,彼此之间不留空隙.不重叠地铺成一片,就叫做这几种图形的平面镶嵌. 1．用一种多边形实现的平面镶嵌图案 我们可以采用正三角形.正方形或正六边形实现平面镶 ...

  9. JavaScript图形实例：纺织物图案

    1．简单纺织物图案 先在HTML页面中设置一个画布. <canvas id="myCanvas" width="360" height="240 ...

随机推荐

  1. java面试常见题目

    JAVA相关基础知识面向对象的特征有哪些方面 1.抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用 ...

  2. LNMP Shell脚本发布

    #!/bin/bash # : #This author is DKS #auto install nginx mysql php ################################## ...

  3. C语言Ⅰ博客作业04

    问题 回答 这个作业属于哪个课程 c语言程序设计ll 这个作业要求在哪里 https://blog.csdn.net/qq_42264638/article/details/102381471 我在这 ...

  4. 【Java】Java中的final关键字和static

    0.概述 final关键字表示是不可变的: 下面分别从属性(字段).方法.类中进行说明: 1.属性(or字段),表示常量 final声明在属性(or字段)中,表示常量,有两种初始化方法,1是在声明时直 ...

  5. css6——通栏平均分布

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

  6. Python使用psutil模块，做你的电脑管家

    电脑管家 也许大家都有这样的感觉,优化完美的电脑系统,你把电脑借给一个电脑小白使用上几天,等你拿回来的时候会发现,开机各种慢,乱七八糟的软件装了一大堆.那么我们如何使用Python来获取电脑的相关数据 ...

  7. replace find join

    >>> s='spam' >>> s=s.replace('m','111') >>> s 'spa111' >>> where ...

  8. 洛谷 3111 [USACO14DEC]牛慢跑Cow Jog_Sliver 题解

    本蒟蒻又来发题解了, 一道较水的模拟题. 题意不过多解释, 思路如下: 在最开始的时候求出每头牛在t秒的位置(最终位置 然后,如果后一头牛追上了前一头牛,那就无视它, 把它们看成一个整体. else ...

  9. P4072 [SDOI2016](BZOJ4518) 征途 [斜率优化DP]

    题目描述 Pine开始了从S地到T地的征途. 从S地到T地的路可以划分成n段,相邻两段路的分界点设有休息站. Pine计划用m天到达T地.除第m天外,每一天晚上Pine都必须在休息站过夜.所以,一段路 ...

  10. 将项目部署到github的方法

    GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名GitHub. GitHub于2008年4月10日正式上线,除了Git代码仓库托管及基本的 We ...