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. 4、Docker 镜像构建

    Docker 镜像构建 构建分为两种 手动构建 自动构建dockerfile 手动构建 首先启动一个Centos 容器,然后在容器中安装一个nginx [root@node ~]# docker ru ...

  2. 顺序队列与链式队列--C语言实现

    关于队列,因为我自己在平时使用不多,所以在这里直接将队列的两种存储方式放在一起,作为一篇随笔,这两份代码均可直接运行,亲测.注释写的应该也算比较详细了,就不过多的解释了 顺序队列 #include&l ...

  3. Spring Boot 2.0 学习笔记（一）——JAVA EE简介

    本章内容:JAVA EE>Spring>Spring Boot 一.JAVA EE简介 1.1 Java ee优点:结束了Web开发的技术无序状态,让程序员.架构师用同一种思维去思考如何架 ...

  4. Vue-Router中History模式【华为云分享】

    [摘要] vue-router的history模式的服务端支持 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端> ...

  5. 全新一代云服务器S6，重新定义性价比

    S6通用计算型云服务器,搭载全新一代处理器,配套华为自研高性能智能网卡,计算与网络性能全面升级.S6进一步强化高性价比定位,满足企业性能要求的同时,降低中小企业上云成本. 更多详情请访问ECS产品介绍 ...

  6. 使用curl创建简单的性能监控工具

    cURL,全称Command Line URL viewer,是一种命令行工具,用来发送网络请求,然后得到和提取数据,显示在标准输出(stdout). 我们可以使用curl来获取网页的源码,显示头信息 ...

  7. 使用正则表达式实现（加减乘除）计算器(C#实现)

    起因:公司领导要求做一款基于行业规范的计算器, 然后需要用户输入一些数据,然后根据用户输入的数据满足某些条件后,再根据用户输入的条件二进行加减乘除运算.;-) 期间因为查找规范等形成数据表的某一列是带 ...

  8. luogu P3110 [USACO14DEC]驮运Piggy Back |最短路

    题目描述 Bessie and her sister Elsie graze in different fields during the day, and in the evening they b ...

  9. 简而意赅 HTTP HTTPS SSL TLS 之间有什么不同

    HTTP HTTPS SSL TLS 之间有什么不同? SSL是Secure Sockets Layer的缩写.SSL的作用是为网络上的两台机器或设备提供了一个安全的通道. TLS是SSL的一个新的名 ...

  10. 带你从头到尾捋一遍MySQL索引结构（2）

    前言 Hello我又来了,快年底了,作为一个有抱负的码农,我想给自己攒一个年终总结.索性这次把数据库中最核心的也是最难搞懂的内容,也就是索引,分享给大家. 这篇博客我会谈谈对于索引结构我自己的看法,以 ...