给定一个正三角形的重心坐标为（x0,y0），高为h，可以用如下的语句绘制一个底边水平的正三角形。

ctx.beginPath();

ctx.moveTo(x0,y0-h*2/3);

ctx.lineTo(x0+h/Math.sqrt(3), y0+h/3);

ctx.lineTo(x0-h/Math.sqrt(3), y0+h/3);

ctx.lineTo(x0,y0-h*2/3);

ctx.closePath();

ctx.stroke();

给定正三角形个数count，通过循环的方式可以绘制出count个重心相同、高度不同正三角形。编写如下的HTML代码。

<!DOCTYPE html>

<html>

<head>

<title>重心相同高度不同的正三角形</title>

</head>

<body>

<canvas id="myCanvas" width="500" height="500" style="border:3px double #996633;">

</canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');

ctx= canvas.getContext('2d');

var height=360;

var x0=250;

var y0=(500-height)/2-(height/7)+(height*2/3);

var count=4;

ctx.lineWidth=1;

ctx.fillStyle="#FF3388";

ctx.strokeStyle="#FFFFFF";

for (var i=0;i<count;i++)

{

var nHeight = height-(height/count)*i;

ctx.beginPath();

ctx.moveTo(x0,y0-nHeight*2/3);

ctx.lineTo(x0+nHeight/Math.sqrt(3), y0+nHeight/3);

ctx.lineTo(x0-nHeight/Math.sqrt(3), y0+nHeight/3);

ctx.lineTo(x0,y0-nHeight*2/3);

ctx.closePath();

ctx.stroke();

ctx.fill();

};

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图1所示的4个重心相同高度不同的正三角形。

图1  4个重心相同高度不同的正三角形

若将图1中除最外层的三角形固定不动外，其余的3个正三角形绕重心进行旋转，会产生怎样的效果呢？

编写如下的HTML代码。

<!DOCTYPE html>

<html>

<head>

<title>旋转的正三角形</title>

</head>

<body>

<canvas id="myCanvas" width="500" height="500" style="border:3px double #996633;">

</canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');

ctx= canvas.getContext('2d');

var height=360;

var x0=250;

var y0=(500-height)/2-(height/7)+(height*2/3);

var count=4;

var speed=2;

ctx.lineWidth=1;

ctx.fillStyle="#FF3388";

ctx.strokeStyle="#FFFFFF";

var j = 0;

function draw()

{

ctx.clearRect(0,0,500,500);

ctx.save();

for (var i=0;i<=count;i++)

{

var nHeight = height-(height/count)*i;

ctx.translate(x0,y0);

ctx.rotate(i*j/(80*speed));

ctx.translate(-x0,-y0);

ctx.beginPath();

ctx.moveTo(x0,y0-nHeight*2/3);

ctx.lineTo(x0+nHeight/Math.sqrt(3), y0+nHeight/3);

ctx.lineTo(x0-nHeight/Math.sqrt(3), y0+nHeight/3);

ctx.lineTo(x0,y0-nHeight*2/3);

ctx.closePath();

ctx.stroke();

ctx.fill();

};

ctx.restore();

j++;

if (j>100000)  j=0;

}

function move()

{

draw();

requestAnimationFrame(move);

}

move();

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出如图2所示重心相同高度不同的正三角形绕重心旋转的动画效果。

图2  正三角形绕重心旋转效果（一）

若将上面程序中语句“var speed=2;”改写为“var speed=-2;”，其余部分保持不变，则正三角形会逆时针旋转，如图3所示。

图3  正三角形绕重心旋转效果（二）

若将增加旋转的三角形的个数并适当调低旋转速度的级别，即修改语句：

“var count=4;    var speed=2;”   为  “var count=20;    var speed=12;”，其余部分保持不变，则在画布中呈现出如图4所示的正三角形旋转效果。

图4  正三角形绕重心旋转效果（三）

由图2、3或4可以看出，正三角形绕重心旋转时，越小的三角形旋转得越快。若将所有的正三角形都用同一种角速度进行旋转，即简单地修改语句 “ctx.rotate(i*j/(80*speed));”为“ctx.rotate(j/(80*speed));”，则在画布中呈现出如图5所示的正三角形旋转效果。

图5  正三角形绕重心旋转效果（四）

若为旋转的正三角形设置裁切区域，使得旋转超出最外层三角形的部分均不可见。编写如下的HTML文件。

<!DOCTYPE html>

<html>

<head>

<title>旋转的正三角形</title>

</head>

<body>

<canvas id="myCanvas" width="500" height="500" style="border:3px double #996633;">

</canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');

ctx= canvas.getContext('2d');

var height=360;

var x0=250;

var y0=(500-height)/2-(height/7)+(height*2/3);

var count=24;

var speed=18;

ctx.lineWidth=2;

ctx.fillStyle="#FF3388";

ctx.strokeStyle="#FFFFFF";

var j = 0;

function draw()

{

ctx.clearRect(0,0,500,500);

ctx.save();

for (var i=0;i<=count;i++)

{

var nHeight = height-(height/count)*i;

ctx.beginPath();

ctx.moveTo(x0,y0-nHeight*2/3);

ctx.lineTo(x0+nHeight/Math.sqrt(3), y0+nHeight/3);

ctx.lineTo(x0-nHeight/Math.sqrt(3), y0+nHeight/3);

ctx.lineTo(x0,y0-nHeight*2/3);

ctx.closePath();

ctx.clip();

ctx.translate(x0,y0);

ctx.rotate(i*j/(80*speed));

ctx.translate(-x0,-y0);

ctx.beginPath();

ctx.moveTo(x0,y0-nHeight*2/3);

ctx.lineTo(x0+nHeight/Math.sqrt(3), y0+nHeight/3);

ctx.lineTo(x0-nHeight/Math.sqrt(3), y0+nHeight/3);

ctx.lineTo(x0,y0-nHeight*2/3);

ctx.closePath();

ctx.stroke();

ctx.fill();

};

ctx.restore();

j++;

if (j>1000)  j=0;

}

function move()

{

draw();

requestAnimationFrame(move);

}

move();

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出如图6所示旋转效果。

图6  正三角形内的旋转

JavaScript动画实例：旋转的正三角形的更多相关文章

  1. JavaScript动画实例：李萨如曲线

    在“JavaScript图形实例:阿基米德螺线”和“JavaScript图形实例:曲线方程”中,我们学习了利用曲线的方程绘制曲线的方法.如果想看看曲线是怎样绘制出来的,怎么办呢?编写简单的动画,就可以 ...

  2. JavaScript动画实例：递归分形图动态展示

    在“JavaScript图形实例:SierPinski三角形” 和“JavaScript图形实例:Levy曲线及其变形”等文章中我们介绍了通过递归生成分形图形的方法.我们可以将绘制的分形图形每隔一定的 ...

  3. JavaScript动画实例：曲线的绘制

    在“JavaScript图形实例:曲线方程”一文中,我们给出了15个曲线方程绘制图形的实例.这些曲线都是根据其曲线方程,在[0,2π]区间取一系列角度值,根据给定角度值计算对应的各点坐标,然后在计算出 ...

  4. JavaScript动画实例：旋转的圆球

    1．绕椭圆轨道旋转的圆球 在Canvas画布中绘制一个椭圆,然后在椭圆上绘制一个用绿色填充的实心圆.之后每隔0.1秒刷新,重新绘制椭圆和实心圆,重新绘制时,实心圆的圆心坐标发生变化,但圆心坐标仍然位于 ...

  5. JavaScript动画实例：动感小球

    已知圆的坐标方程为: X=R*SIN(θ) Y=R*COS(θ)     (0≤θ≤2π) 将0~2π区间等分48段,即设定间隔dig的值为π/24.θ初始值从0开始,按曲线方程求得坐标值(x,y), ...

  6. JavaScript动画实例：螺旋线

    数学中有各式各样富含诗意的曲线,螺旋线就是其中比较特别的一类.螺旋线这个名词来源于希腊文,它的原意是“旋卷”或“缠卷”.例如,平面螺旋便是以一个固定点开始向外逐圈旋绕而形成的曲线.在2000多年以前, ...

  7. JavaScript动画实例：沿五角星形线摆动的小圆

    五角星形线的笛卡尔坐标方程式可设为: r=10+(3*sin(θ*2.5))^2  x=r*cos(θ) y=r*sin(θ)              (0≤θ≤2π) 根据这个曲线方程,在[0,2 ...

  8. JavaScript动画实例：运动的字母特效

    已知圆的坐标方程为: X=R*SIN(θ) Y=R*COS(θ)     (0≤θ≤2π) 给定初始坐标位置(X,Y),按照圆的坐标方程,从角度angle = 0开始,每间隔angleSpeed = ...

  9. JavaScript动画实例：炸开的小球

    1．炸开的小球 定义一个小球对象类Ball,它有6个属性:圆心坐标(x,y).小球半径radius.填充颜色color.圆心坐标水平方向的变化量speedX.圆心坐标垂直方向的变化量speedY. B ...

随机推荐

  1. Tensorflow中Tensor对象的常用方法（持续更新）

    Tensor是Tensorflow中重要的对象.下面是Tensor的常用方法,后面还会写一篇随笔记录Variable的用法. 1. 生成一个(常)Tensor对象 >>>A = tf ...

  2. Python SimpleHTTPServer (python3 -m http.server 6789)

    搭建FTP,或者是搭建网络文件系统,这些方法都能够实现Linux的目录共享.但是FTP和网络文件系统的功能都过于强大,因此它们都有一些不够方便的地方.比如你想快速共享Linux系统的某个目录给整个项目 ...

  3. Linux下，如何监控某个进程到底向哪个地址发起了网络调用

    Linux下,如何监控某个进程到底向哪个地址发起了网络调用 有时候,有些应用,比如idea,你发起某个操作时,其底层会去请求网络,获取一些数据. 但是不知道,请求了什么地址.举个例子,在idea中,m ...

  4. VS Code WebApi系列——1、配置

    Knowledge should be Shared in Free. 最近在研究VS code下的webapi,看了很多文档,还是微软官方的例子好,不过不太适应国人习惯,所以写点东西. 直接了当 开 ...

  5. Azure Monitor（一）Application Insights

    一,引言 Azure Monitor 是 Azure 中的一项完整堆栈监视服务,是一种收集和分析遥测数据的服务.它提供了一组完整的功能来监视 Azure 资源以及其他云中和本地的资源.Azure Mo ...

  6. 处理TortoiseGit一直弹出密码框的方法 -输入git@XXXX.com的密码

    问题 :在push和pull的时候,一直都弹出这个框 1.开始处搜索TortoiseGit文件夹,找到其中的“PuTTYgen”文件,如下显示 2.运行之后在弹出的窗口中点击下方的“Generate” ...

  7. MySQL Workbench 8.0 目录汉化

    <?xml version="1.0"?> <data> <value type="list" content-type=&quo ...

  8. Django实现图片上传并前端页面显示

    Django实现图片上传和图片显示 开始之前我们先确认环境中已经安装了Pillow,如果没有安装,可以通过pip install Pillow来安装,这个是python的图像处理库 数据库设置 我们创 ...

  9. html+css快速入门教程（5）

    练习: 1.画盒子1 2.画盒子2 3.京东特色购物 4.京东发现好货 5.京东玩3c 7.3 定位 通过使用 position 属性,我们可以选择 3 种不同类型的定位,这会影响元素框生成的方式. ...

  10. 小白写了一堆if-else，大神实在看不下去了，竟然用策略模式直接摆平了

    这里涉及到一个关键词:策略模式,那么到底什么是策略模式呢?本文就来好好给大家讲讲策略模式,大家可以带着如下几个问题来阅读本文:   1. 如何通过策略模式优化业务逻辑代码(可以根据自己从事的工作思考) ...