渐开线(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. CSU 2031

    2031: Barareh on Fire Submit Page   Summary   Time Limit: 3 Sec     Memory Limit: 512 Mb     Submitt ...

  2. bzoj 3309 DZY Loves Math 莫比乌斯反演

    DZY Loves Math Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 1303  Solved: 819[Submit][Status][Dis ...

  3. linux中shell变量$#,$@,$0,$1,$2

    linux中shell变量$#,$@,$0,$1,$2的含义解释: 变量说明: $$ Shell本身的PID(ProcessID) $! Shell最后运行的后台Process的PID $? 最后运行 ...

  4. display 垂直居中

    /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex ...

  5. IOS VLC编译步骤（包含移植和截图功能）

    http://blog.csdn.net/Kan_Crystal/article/details/40424673 一.下载源码 先到VLC官网将源码下载到本机,以下链接为官网编译操作地址:https ...

  6. 配置wpa_supplicant调试wifi linux下命令行连接wifi

    调试wpa_supplicant先读一下对应的README.txt文件.根据README.txt修改编译配置. wpa_supplicant需要打开以下开关进行编译CONFIG_DRIVER_NL80 ...

  7. C# Log4Net使用示例

    using log4net; using log4net.Config; using System; using System.IO; namespace Three.Logging { /// &l ...

  8. UVA 1604：Cubic Eight-Puzzle（模拟，BFS Grade C）

    题意: 3*3方格,有一个是空的.其他的每个格子里有一个立方体.立方体最初上下白色,前后红色,左右蓝色.移动的方式为滚.给出初态空的位置,终态上面颜色情况,问最少多少步能到达.如果超过30步不能到达, ...

  9. PL/SQL&存储过程||存储函数&触发器

    plsql 有点:交互式  非过程化   数据操纵能力强   自动导航语句简单   调试简单   想率高 声明类型的方式 1.基本类型 2.引用变量 3.记录型变量 基本格式 declare 声明 b ...

  10. 浅谈JavaScript中的null和undefined

    浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...