渐开线(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. mac平台打造犀利的Android Studio开发环境

    0x0 背景介绍  随着Android Studio功能越来越强大,Android平台的开发者们基本上都从原来的Eclipse + ADT 转到了AS上.本文就记录自己在配置AS环境过程中遇到的各种问 ...

  2. POJ1679 The Unique MST

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 26782   Accepted: 9598 Description Give ...

  3. Android 中带有进度条效果的按钮（Button）

    安卓中带有进度条效果的按钮,如下图: 1.布局文件如下activity_main.xml <RelativeLayout xmlns:android="http://schemas.a ...

  4. MY97 日期控件只输入今天之前的值

    <script type="text/javascript">                        function GetDate() {          ...

  5. [BZOJ1601][Usaco2008 Oct]灌水 最小生成树水题

    1601: [Usaco2008 Oct]灌水 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 2121  Solved: 1393[Submit][St ...

  6. 在libGDX中使用Spine骨骼动画

    首先,github是个宝库,实践流的读者可以直接看例子进行学习 1.这是Spine官方给出的例子 https://github.com/EsotericSoftware/spine-superspin ...

  7. linux 系统的负载与CPU、内存、硬盘、用户数监控脚本[marked]

    转载文章 原始出处  在没有nagios监控的情况下,只要服务器能上互联网,就可通过发邮件的方式来提醒管理员系统资源的使用情况. 一.编写linux系统告警邮件脚本 # vim /scripts/sy ...

  8. 服务的注册与发现Eureka（二）

    1.服务治理概念 在传统rpc远程调用中,服务与服务依赖关系,管理比较复杂,所以需要使用服务治理,管理服务与服务之间依赖关系,可以实现服务调用.负载均衡.容错等,实现服务发现与注册. 2.服务的注册与 ...

  9. hdu3001（状态压缩DP）

    hdu3001 题意 选择从任意一点出发,经过所有点的最小花费(经过每个点的次数不能多于 2 次). 分析 类似于 poj3311 经过每个点的次数有限制,考虑用三进制数存储每个点被访问过的次数,其它 ...

  10. 洛谷——P1107 最大整数

    P1107 最大整数 题目描述 设有n个正整数 (n<=20), 将它们连接成一排, 组成一个最大的多位整数. 例如: n=3时, 3个整数13, 312, 343连接成的最大整数为: 3433 ...