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. Ansible 常见模块介绍

    目录 Ansible 常见模块介绍 ping 模块 command 模块 cron 模块 user 模块 group 模块 copy 模块 file 模块 service 模块 shell 模块 sc ...

  2. 【洛谷P1835】素数密度

    题目描述: 给定区间[L,R](L≤R≤2147483647,R-L≤1000000),请计算区间中素数的个数. 思路: 暴力: 蒟蒻:哦?绿题?这么水?(便打出下面代码) 这绝对是最容易想到的!但, ...

  3. CSS与JavaScript小结

    一.css 全称Cascading Style Sheets,层叠样式表,具体的作用是美化页面,让页面中显得更加美观. 1.使用方式 在HTML页面中有三个地方可以使用,分别是标签内,头部标签中以及在 ...

  4. 不给糖果就捣乱，用Python绘制有趣的万圣节南瓜怪【华为云分享】

    关于万圣节 万圣节又叫诸圣节,在每年的11月1日,是西方的传统节日:而万圣节前夜的10月31日是这个节日最热闹的时刻.在中文里,常常把万圣节前夜(Halloween)讹译为万圣节(All Saints ...

  5. redis--linux环境搭建

    1.redis诞生的背景 在这要从08年开始说起,一个意大利的小伙子创建一个访问网站信息的LLOOGG.COM网站,用来记录网站的访问记录,查看最近一万条访问信息,每次访问都会将数据存入mysql当中 ...

  6. luogu P1082 同余方程 |扩展欧几里得

    题目描述 求关于 x的同余方程 ax≡1(modb) 的最小正整数解. 输入格式 一行,包含两个正整数 a,ba,b,用一个空格隔开. 输出格式 一个正整数 x,即最小正整数解.输入数据保证一定有解. ...

  7. luogu P5171 Earthquake

    题目描述 给定 a,b,c ,求满足方程 ax+by⩽c 的非负整数解个数. 输入格式 输入三个整数 a,,b,,c . 输出格式 输出一个整数表示答案. 类欧几里得算法 #include<cs ...

  8. UVA-156

    Most crossword puzzle fans are used to anagrams - groups of words with the same letters in different ...

  9. 【Redis】349- Redis 入门指南

    点击上方"前端自习课"关注,学习起来~ 1. 概述 1.1. Redis 简介 Redis 是速度非常快的非关系型(NoSQL)内存键值数据库,可以存储键和五种不同类型的值之间的映 ...

  10. Vue中slot插槽的使用