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 工作原理之六-WebAssembly 对比 JavaScript 及其使用场景
- Javascript String类的属性及方法
- 使用javascript实现html文本不可选
- JavaScript模板引擎实例应用
- [Javascript] Use requestIdleCallback to schedule JavaScript tasks at an optimal time
- [Javascript] Compose multiple functions for new behavior in JavaScript
- es6 javascript的class的静态方法、属性和实例属性
- [Javascript] Filter out Duplicates from Flat JavaScript Array with array.filter / reduce / Set
- [Algorithms] Classify Mystery Items with the K-Nearest Neighbors Algorithm in JavaScript
- [Javascript] Await a JavaScript Promise in an async Function with the await Operator
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain
- [Javascript] Compose multiple functions for new behavior in JavaScript
- [Javascript] Test you code proferemce!! SpeedTestClass
- JavaScript一次性定时器的设置和取消
- 从零开始学_JavaScript_系列(25)——dojo(10)摧毁一个widget
- 从零开始学_JavaScript_系列(十一)——dojo(4)(GRID表格进阶:格式化、style、数据获取、多重排序、点击事件)
- JavaScript中的排他算法实现按钮单选
- 【华为OD机试 2023】 服务中心选址(C++ Java JavaScript Python)
- JavaScript学习总结(四)——this、原型链、javascript面向对象
- 每天一个JavaScript实例-从一个div元素删除一个段落
- 常见的windows下无文件落地攻击手法——主要讨论了powershell脚本、HTA是HTML Application的缩写(HTML应用程序)、xml中利用COM组件、certutil下载然后调用Dcom组件执行恶意代码、msxsl.exe是微软用于命令行下处理XSL的可以执行JavaScript执行系统命令