渐开线(evolent)：在平面上，一条动直线（发生线）沿着一个固定的圆（基圆）作滚动的过程中，此直线上任意一点的轨迹，称为此基圆的一条渐开线。如果将一个圆轴固定在一个平面上，轴上缠线，拉紧一个线头，让该线绕圆轴运动且始终与圆轴相切，那么线上一个定点在该平面上的轨迹就是渐开线。上图中红色粗线是渐开线的轨迹。

下面是实现代码，代码采用了JS类的设计以分离数据和表现：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>渐开线</title>
    </head>

     <body onload="draw()">
        <canvas id="myCanvus" width="800px" height="800px" style="border:1px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--

function draw(){
    var canvas=document.getElementById('myCanvus');
    canvas.width=800;
    canvas.height=800;
    context=canvas.getContext('2d');
    context.translate(400,200);

    var e=new evolent();
    e.updateCds(10);
    e.paintInnerCircle(context);
    e.paintTriangles(context);
    e.paintCurve(context);
};

// 渐开线类
function evolent(){
    var obj=new Object;

    // 属性
    obj.radius=50;// 内圆半径
    obj.initLen=20;// 初始线长
    obj.turnAngle=30;// 转角
    obj.cds=[{}];// 坐标数组

    obj.paintInnerCircle=function(context){
        context.strokeStyle = "black";
        context.arc(0,0,this.radius,0,Math.PI*2);
        context.stroke();            

    };

    // 画三角形
    obj.paintTriangles=function(context){
        for(var i=0; i<this.cds.length; i++){
            context.strokeStyle = getColor(i % 15);

            context.beginPath();

            context.moveTo(0, 0);
            context.lineTo(this.cds[i].x1,this.cds[i].y1);
            context.lineTo(this.cds[i].x2,this.cds[i].y2);

            context.closePath();
            context.stroke();
        }
    };

    // 画渐开线曲线
    obj.paintCurve=function(context){
        context.lineWidth=2;
        context.strokeStyle = "red";
        context.beginPath();

        for(var i=0; i<this.cds.length; i++){
            context.lineTo(this.cds[i].x2,this.cds[i].y2);
        }     

        //context.closePath();
        context.stroke();
    };

    // 设定渐开线坐标
    obj.updateCds=function(count){
        this.cds.pop();

        for(var i=0;i<count;i++){
            var theta=i*this.turnAngle;
            var x1=this.radius*Math.cos(getRad(theta));
            var y1=this.radius*Math.sin(getRad(theta));
            var leg=this.initLen+theta/360*2*Math.PI*this.radius;
            var delta=Math.atan(this.initLen/this.radius+theta/360*2*Math.PI);

            var hypotenuse=Math.sqrt(this.radius*this.radius+leg*leg);
            var angle=getRad(theta)-delta;
            var x2=hypotenuse*Math.cos(angle);
            var y2=hypotenuse*Math.sin(angle);

            var arr={"x1":x1,"y1":y1,"x2":x2,"y2":y2};
            this.cds.push(arr);
        }
    };

    return obj;
}

function animate(){
    // 让浏览器自行决定帧速率
    window.requestAnimationFrame(animate);
}

// 角度得到弧度
function getRad(degree){
    return degree/180*Math.PI;
}

// 得到颜色
function getColor(index){
    if(index==0){
        return "green";
    }else if(index==1){
        return "silver";
    }else if(index==2){
        return "lime";
    }else if(index==3){
        return "gray";
    }else if(index==4){
        return "white";
    }else if(index==5){
        return "yellow";
    }else if(index==6){
        return "maroon";
    }else if(index==7){
        return "navy";
    }else if(index==8){
        return "red";
    }else if(index==9){
        return "blue";
    }else if(index==10){
        return "purple";
    }else if(index==11){
        return "teal";
    }else if(index==12){
        return "fuchsia";
    }else if(index==13){
        return "aqua";
    }else if(index==14){
        return "black";
    }
}

//-->
</script>

HTML5 Canvas 描画渐开线的更多相关文章

  1. html5——canvas画布

    一.基本介绍 1,canvas是画布,可以描画线条,图片等,现代的浏览器大部分都支持. canvas的width,height默认为300*150,要指定画布大小,不能用css样式的widh,heig ...

  2. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  3. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  4. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  5. html5 canvas常用api总结(一)

    1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...

  6. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  7. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

  8. 自己写的HTML5 Canvas + Javascript五子棋

    看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...

  9. HTML5 Canvas彩色小球碰撞运动特效

    脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效.   效果展示 http://hovertree.com/texiao/html5/39/ ...

随机推荐

  1. TCP面试题之滑动窗口原理

    TCP 滑动窗口 作用: 1. 提供TCP可靠性:对发送的数据进行确认 2. 流量控制:窗口大小随链路变化 一.TCP窗口机制 TCP中窗口大小是指tcp协议一次传输多少个数据.因为TCP是一个面向连 ...

  2. testng自定义注解

    在testng中大部分的注解已经可以满足我们测试的需求,但是在测试的时候想要通过注解的方式加入自己测试一些内容,比如 测试项目 测试描述  验证点等信息,可通过自定义注解的方式实现. 具体操作步骤如下 ...

  3. Android横竖屏切换生命周期

    转自xiaoQLuhttp://www.cnblogs.com/xiaoQLu/p/3324503.html 开源帮助android获得了飞速的发展,开源也导致了数不清的碎片问题.android的前期 ...

  4. DataTable 去重合并

    //合并 dt.Merge(dt2); //去重 dt = dt.AsDataView().ToTable(true);

  5. MFC does not support WINVER less than 0x0501 解决方案（转）

    原文转自 http://blog.csdn.net/ygzhong000/article/details/41750841 解决方案:在stdafx.h头文件中添加以下行. #define WINVE ...

  6. MFC CString GetBuffer/ReleaseBuffer 的使用条件

      今天为了通过串口往单片机里写一个16进制字符去控制单片机的adc的起停,结果糊涂到把'\x01'误写成'\0x01',怎么也得不到意想的结果,程序员有时候会犯低级错误,有时候怎么也跳不出去,这时候 ...

  7. 华为上机测试题（地铁换乘-java）

    PS:自己写的,自测试OK,供大家参考. /* 高级题样题:地铁换乘描述:已知2条地铁线路,其中A为环线,B为东西向线路,线路都是双向的.经过的站点名分别如下,两条线交叉的换乘点用T1.T2表示.编写 ...

  8. docker入门之：centos6.5 安装docker

    centos6.5 : 使用EPEL库安装docker: # sudo yum install -y  http://mirrors.yun-idc.com/epel/6/i386/epel-rele ...

  9. UVA 1395 Slim Span 最小生成树

    题意: 给你一个图,让你求这个图中所有生成树中满足题目条件的,这个条件是生成树中最长边与最短边的差值最小. 思路: 根据最小瓶颈生成树的定义:在一个有权值的无向图中,求一个生成树最大边的权值尽量小.首 ...

  10. Codeforces 954H Path Counting（DP）

    题目链接  Path Counting 题意  给定一棵高度为$n$的树,给出每一层的每个点的儿子个数(某一层的所有点儿子个数相同).   令$f_{k}$为长度为$k$的路径条数,求$f_{1}, ...