等速螺线亦称阿基米德螺线，得名于公元前三世纪希腊数学家阿基米德。阿基米德螺线是一个点匀速离开一个固定点的同时又以固定的角速度绕该固定点转动而产生的轨迹。在此向这位古代最伟大的数学家致敬。用Canvus画螺线主要用到了JSon数组的插值和遍历，请见代码：

<!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="200px" height="200px" style="border:1px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
function draw(){
    var canvas=document.getElementById('myCanvus');
    canvas.width=200;
    canvas.height=200;
    context=canvas.getContext('2d');    

    animate();
};

var delta=0;
var radius=0;
var cds=[{}];// 初始化cds为空json
var contex;
function animate(){
    context.clearRect(0,0,200,200);// 清屏
    delta+=1;
    radius+=0.1;

    // 往cds里面插值
    var x=radius*Math.cos(getRad(delta));
    var y=radius*Math.sin(getRad(delta));
    var arr={"x":x,"y":y};
    cds.push(arr);

    // 将数组里面的点一段段连线
    context.strokeStyle = "black";
    context.save();
    context.translate(100,100);
    context.beginPath();

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

    context.stroke();
    context.closePath();
    context.restore();

    if(radius<1.414*100){
        // 让浏览器自行决定帧速率
        window.requestAnimationFrame(animate);
    }
}

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

//-->
</script>

HTML5 Canvas 动态勾画等速螺线的更多相关文章

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

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

  2. HTML5 Canvas 八星聚义动态效果

    昔有石碣村七星聚义,今有Canvas八星聚义.动态效果是,八颗星以等速螺线慢慢向中心聚集,最后汇聚成一颗. 效果: 代码: <!DOCTYPE html> <html lang=&q ...

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

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

  4. 如何在HTML5 Canvas 里面显示 Font Awesome 图标

        Font Awesome 是一套完美的图标字体,主要目的是和 Bootstrap 搭配使用. 提供的CSS 已经可以完美显示这些图标在网页里面.最新的版本4.3 里面,已经提供519 Icon ...

  5. html5 canvas画图之图形随拖动而复制（有操作指示）

    学习html5 canvas,写了一个小练习来加深理解,可以实现图形随拖动而复制. <!DOCTYPE html> <html> <head> <meta c ...

  6. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  7. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  8. HTML5 Canvas 概述

    本文中,我们将探索如何使用HTML5的Canvas API.Canvas API很酷,我们可以通过它来动态创建生成和展示图形,图表,图像以及动画.本文将使用渲染API(rendering API)的基 ...

  9. html5 canvas+js实现ps钢笔抠图

    html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...

随机推荐

  1. Java并发（3）- 聊聊Volatile

    引言 谈到volatile关键字,大多数开发者都有一定了解,可以说是开发者非常熟悉,深入之后又非常陌生的一个关键字.相当于轻量的synchronized,也叫轻量级锁,与synchronized相比性 ...

  2. 50 days before NOI2017

    2017.5.31 今天开了这个博客,打算每天来写点东西,嗯...毕竟要NOI了嘛... 第一天跑到常州里集训,打开题目一看湖南集训题... T1刷一下写完,然后交了然后发现错了...赶紧改过来,大概 ...

  3. CSS技巧----DIV+CSS规范命名大全集合

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  4. 生活大爆炸版锤子剪刀布（NOIP2014）（真·模拟）

    水!水!!水!!!(重要的事情说三遍..) 1分钟代码题.. 原题传送门 这题啊,手打BOOL判断,然后乱搞啊.. 这有什么难的.. 加个快读就能拿第一啦.. 膜9018上各位大佬们.. 下面贴代码 ...

  5. 花匠（NOIP2013）（神奇纯模拟）

    原题传送门 这是道很奇怪的题目,真不知道为什么要放到T2. 也许是T1太水了 首先先看题, 题目要求一个数列中下标为偶数的点比临近的下表为奇数的点更大或更小 其实就是说在原数组中找到一个最长的波动数列 ...

  6. 让vim的在输入模式下现实光标不同

    前几天用过苹果之后,发现vim中在插入模式下与命令模式下光标形状不同,根据光标形状就可以快速确认所在的模式,很方便,后来查了很多资料,一直查到官方的wiki也没有搞定,后来,终于搞定,现记录如下:我的 ...

  7. 戴文的Linux内核专题：02 源代码【转】

    转自:https://linux.cn/article-2190-1.html?pr 在下载并解压内核源代码后,用户可以看到许多文件夹和文件.尝试去找一个特定的文件或许是一个挑战.谢天谢地,源代码以一 ...

  8. python的递归算法学习（3）：汉诺塔递归算法

    汉诺塔问题是递归函数的经典应用,它来自一个古老传说:在世界刚被创建的时候有一座钻石宝塔A,其上有64个金蝶.所有碟子按从大到小的次序从塔底堆放至塔顶.紧挨着这座塔有另外两个钻石宝塔B和C.从世界创始之 ...

  9. hdu 1102(最小生成树)

    Constructing Roads Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  10. Jmeter实时性能测试数据的监控

    Jmetet实时性能测试数据的监控和展示Jmeter Grafana InfluxDB 安装Grafana配置jmeter安装InfluxDB配置Grafana展示数据一安装InfluxDB 为了方便 ...