渐开线(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. javascript中在定义函数的几种形式

    内容主要是讲述javascript在类(原型对象)中定义方法的几种形式,简要之主要有三种:this关键字.prototype关键字.var 对象名={name:value,name2:value2}: ...

  2. 棘手的操作（bzoj 2333）

    Description 有N个节点,标号从1到N,这N个节点一开始相互不连通.第i个节点的初始权值为a[i],接下来有如下一些操作: U x y: 加一条边,连接第x个节点和第y个节点 A1 x v: ...

  3. EF 创建数据库的策略 codefist加快效率！【not oringin!】

    今天去搜寻,ef创建数据库的策略有四种,区分还是和数据库里sql的创建的语句这些英文差不多一致. 一:数据库不存在时重新创建数据库 Database.SetInitializer<testCon ...

  4. (七)ubuntu下编译openwrt内核的环境配置

    首先安装基本开发环境: sudo apt-get install ssh vim samba tftp nfs 安装编译openwrt须要的包: 解压openwrt包编译出错: Build depen ...

  5. Selenium2+python自动化18-加载Firefox配置【转载】

    前言有小伙伴在用脚本启动浏览器时候发现原来下载的插件不见了,无法用firebug在打开的页面上继续定位页面元素,调试起来不方便 . 加载浏览器配置,需要用FirefoxProfile(profile_ ...

  6. Selenium2+python自动化6-八种元素元素定位（Firebug和firepath）【转载】

    前言 自动化只要掌握四步操作:获取元素,操作元素,获取返回结果,断言(返回结果与期望结果是否一致),最后自动出测试报告.本篇主要讲如何用firefox辅助工具进行元素定位.元素定位在这四个环节中是至关 ...

  7. mysql打开文件数太多的解决办法

    http://www.orczhou.com/index.php/2010/10/mysql-open-file-limit/ http://www.cnblogs.com/end/archive/2 ...

  8. PSR-2 编码风格规范

    本篇规范是 PSR-1 基本代码规范的继承与扩展. 本规范希望通过制定一系列规范化PHP代码的规则,以减少在浏览不同作者的代码时,因代码风格的不同而造成不便. 当多名程序员在多个项目中合作时,就需要一 ...

  9. Codeforces 832 B. Petya and Exam-字符串匹配

    补的若干年以前的题目,水题,太菜啦_(:з」∠)_    B. Petya and Exam   time limit per test 2 seconds memory limit per test ...

  10. DAG动态规划-硬币问题

    题目:有n种硬币,面值分别为V1,V2,...Vn,每种都有无限多.给定非负整数S,可以选用多少个硬币,使得面值之和恰好为S?输出硬币数目的最小值和最大值! #include <bits/std ...