JavaScript图形实例:纺织物图案
1.简单纺织物图案
先在HTML页面中设置一个画布。
<canvas id="myCanvas" width="360" height="240">
</canvas>
再在定义的这块360*240的canvas(画布)上面用二重循环绘制纺织物图案。
绘制图案的基本思想是:将画布分成6行8列的子块,即每个子块的宽度为60,高度为30。在每个子块中按规律交错地绘制11条横线或21条竖线。
可编写如下的HTML代码。
<!DOCTYPE html>
<head>
<title>简单纺织物图案</title>
<script type="text/javascript">
function draw(id)
{
var canvas=document.getElementById(id);
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
context.strokeStyle="red";
context.lineWidth=1;
context.beginPath();
var i=0,j=0;
for (px=0;px<360;px+=60)
{
i++;
for (py=0; py<240; py+=30)
{
j=j%6+1;
if (i%2==j%2)
{
for (k=0;k<=30;k+=3)
{
context.moveTo(px,py+k);
context.lineTo(px+60,py+k);
}
}
else
{
for (k=0;k<=60;k+=3)
{
context.moveTo(px+k,py);
context.lineTo(px+k,py+30);
}
}
}
}
context.closePath();
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="360" height="240">您的浏览器不支持canvas!
</canvas>
</body>
</html>
将上述HTML代码保存到一个html文本文件中,再在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中绘制出如图1所示的简单纺织物图案。
图1 简单纺织物图案
由图1看出,在简单纺织物图案中,每个小块之间的分割线条很明显。若将JavaScript程序中的循环语句“for (k=0;k<=30;k+=3)”改写为“for (k=0;k<30;k+=3)”,即如果绘制横线,只绘制10条;再将循环语句“for (k=0;k<=60;k+=3)”改写为for (k=0;k<60;k+=3),即如果绘制竖线,只绘制20条。再在浏览器中打开修改后的HTML文件,显示出一个具有凸凹效果的纺织物图案,如图2所示。
图2 具有凸凹效果的纺织物图案
2.按三角函数分布的纺织物图案
上面的纺织物图案比较简单,不管是横线还是竖线,直线间间隔均为3,能否将直线的绘制间隔按某种规律分布呢?考虑采用三角函数计算直线的分布间隔,可重新编写HTML代码如下。
<!DOCTYPE html>
<head>
<title>按三角函数分布的纺织物图案</title>
<script type="text/javascript">
function draw(id)
{
var canvas=document.getElementById(id);
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
context.strokeStyle="red";
context.lineWidth=1;
context.beginPath();
var i=0,j=0;
for (px=0;px<360;px+=60)
{
i++;
for (py=0; py<240; py+=30)
{
j=j%6+1;
if (i%2==j%2)
{
for (k=0;k<=15;k++)
{
y=30-30*Math.sin(k*Math.PI/15);
context.moveTo(px,py+y);
context.lineTo(px+60,py+y);
}
}
else
{
for (k=0;k<=25;k++)
{
x=30-30*Math.cos(k*Math.PI/25);
context.moveTo(px+x,py);
context.lineTo(px+x,py+30);
}
}
}
}
context.closePath();
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="360" height="240">您的浏览器不支持canvas!
</canvas>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中绘制出如图3所示的纺织物图案。
图3 按三角函数分布的纺织物图案
最新文章
- 二维码相关---java生成二维码名片,并且自动保存到手机通讯录中...
- 如何在centos 6.7 上安装oracle 11gR2
- javascript 小技巧
- HTML5——摒弃插件和前端框架的异步文件上传
- mongoDB 使用手册
- IT人生思考
- UITableView:下拉刷新和上拉加载更多
- ServiceStack.OrmLite 笔记8 -还是有用的姿势
- Hadoop数据传输工具:Sqoop
- 关于java线程池 Ⅱ
- hdu 1242 dfs/bfs
- Spark学习笔记-如何运行wordcount(使用jar包)
- Android中API建议的方式实现SQLite数据库的增、删、改、查的操作
- IntelliJ IDEA新建JAVA WEB项目(转载)
- 团队作业9--测试与发布(Beta版)
- Spring任务调度之Quartz集成
- 【MySQL 读书笔记】RR(REPEATABLE-READ)事务隔离详解
- 机器学习--------SVM
- Runtime ";Apache Tomcat v6.0 (3)"; is invalid. The JRE could not be found. Edit the server and change the JRE location解决方案
- CentOS之RPM
热门文章
- java中的基本数据类型转换
- “word无法创建工作文件,请检查临时环境变量”的解决办法
- 关于jsp中jstl报错Can not find the tag library descriptor for "http://java.sun.com/jsp/jstl/core
- OC循环方法推荐-块循环遍历(比for循环好用)
- 这货到底还是不是垃圾?【垃圾回收GC算法JVM篇四】
- 配置中心入门案例以及出现Could not resolve placeholder &#39;XXX&#39; in value ";${XXX}";的解决方式
- 数据库Oracle的含义
- C++使用libcurl做HttpClient 和 curl_easy_setopt
- 【React】377- 实现 React 中的状态自动保存
- 使用for语句输出1-100之间的所有偶数