JavaScript图形实例：布纹图案
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图形实例：布纹图案的更多相关文章
- JavaScript图形实例：圆形图案
在HTML5的Canvas 2D API中,可以调用arc方法绘制圆或圆弧.该方法调用格式为: context . arc(x, y, radius, startAngle, endAngle, an ...
- JavaScript图形实例：窗花图案
1．窗花基本框线 设定曲线的坐标方程为: n=25; r=100; x=r/n*cos(5*θ)+r*cos(θ); y=r/n*sin(5*θ)+r*sin(θ); (0≤θ≤2π ...
- JavaScript图形实例：线段构图
在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段 ...
- JavaScript图形实例：再谈IFS生成图形
在“JavaScript图形实例:迭代函数系统生成图形”一文中,我们介绍了采用迭代函数系统(Iterated Function System,IFS)创建分形图案的一些实例.在该文中,仿射变换函数W的 ...
- JavaScript图形实例：随机SierPinski三角形
在“JavaScript图形实例:SierPinski三角形”中,我们介绍了SierPinski三角形的基本绘制方法,在“JavaScript图形实例:迭代函数系统生成图形”一文中,介绍了采用IFS方 ...
- JavaScript图形实例：迭代函数系统生成图形
迭代函数系统(Iterated Function System,IFS)可以用来创建分形图案,它是分形理论的重要分支,也是分形图形处理中最富生命力而且最具有广阔应用前景的领域之一.这一工作最早可以追溯 ...
- JavaScript图形实例：四瓣花型图案
设有坐标计算公式如下: X=L*(1+SIN(4α))*COS(α) Y=L*(1+SIN(4α))*SIN(α) 用循环依次取α值为0~2π,计算出X和Y,在canvas画布中对坐标位置(X,Y)描 ...
- JavaScript图形实例：平面镶嵌图案
用形状.大小完全相同的一种或几种平面图形进行拼接,彼此之间不留空隙.不重叠地铺成一片,就叫做这几种图形的平面镶嵌. 1．用一种多边形实现的平面镶嵌图案 我们可以采用正三角形.正方形或正六边形实现平面镶 ...
- JavaScript图形实例：纺织物图案
1．简单纺织物图案 先在HTML页面中设置一个画布. <canvas id="myCanvas" width="360" height="240 ...
随机推荐
- Chapter 02—Creating a dataset(Part3-补充材料Stat/Transfer)
Stat/Transfer:在电子表格(worksheet),数据库(database),统计包(statistical package)间进行数据转换,具有简单高效的特点. 资料来源于:http:/ ...
- xpath-房价爬取
xpath xpath两种使用方式 和bs类似,一种是调用本地资源,一种是网络资源 etree.parse(filePath) etree.HTML('page_text') xpath表达式 层级: ...
- [学习笔记] [数据分析] 02、NumPy入门与应用
01.NumPy基本功能 ※ 数据类型的转换在实际操作过程中很重要!!! ※ ※ ndarray的基本索引与切片 ※ 布尔型数组的长度必须跟被索引的轴长度一致 花式索引是利用“整数数组”进行索引. 整 ...
- JavaScript的内存模型
引言 在我们的前端日常工作中,无时无刻不在进行着变量的声明和赋值,你是否也曾碰到过变量声明报错或变量被污染的问题,如果你跟笔者一样碰到过,那么我们应该暂时停下来好好思考问题发生的原因以及如何采取相应的 ...
- js之观察者模式和发布订阅模式区别
观察者模式(Observer) 观察者模式指的是一个对象(Subject)维持一系列依赖于它的对象(Observer),当有关状态发生变更时 Subject 对象则通知一系列 Observer 对象进 ...
- Aria2GUI for macOS - 百度网盘高速下载
目录 一. aria2gui 1.1 下载地址:aria2gui 1.2 安装 1.2.1 方式一:手动安装 1.2.2 方式二:Homebrew安装 二. YAAW for Chrome 2.1 下 ...
- 一些demo
绑定端口demo: #include <stdio.h> #include <sys/socket.h> #include <stdlib.h> #include ...
- USB工业摄像头设计之上位机
在工业相机中对摄像头要求较高,且采集的图像数据要求是源数据,未经过任何处理. 为了兼容xp.win7(32bit 64bit) 程序采用VS2008 MFC编制,参考网上一些应用. CYUSB驱动与 ...
- Day 02 作业
作业 一 什么是编程? 基于编程语言的语法格式将自己脑中里想让计算机做的事,写到文件中. 二 简述计算机五大组成 控制器,运算器,存储器,输入设备,输出设备 三 操作系统有什么用? 操作系统直接与硬件 ...
- 移动端Vue图片获取,压缩,预览组件-upload-img(H5+获取照片,压缩,预览)
组件示例图 组件代码 upload_img.vue <div id="uploadImg"> <div class="upload_image_box& ...