HTML5 Canvas 动态勾画等速螺线
等速螺线亦称阿基米德螺线，得名于公元前三世纪希腊数学家阿基米德。阿基米德螺线是一个点匀速离开一个固定点的同时又以固定的角速度绕该固定点转动而产生的轨迹。在此向这位古代最伟大的数学家致敬。用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 动态勾画等速螺线的更多相关文章
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- HTML5 Canvas 八星聚义动态效果
昔有石碣村七星聚义,今有Canvas八星聚义.动态效果是,八颗星以等速螺线慢慢向中心聚集,最后汇聚成一颗. 效果: 代码: <!DOCTYPE html> <html lang=&q ...
- html5 canvas首屏自适应背景动画循环效果代码
模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...
- 如何在HTML5 Canvas 里面显示 Font Awesome 图标
Font Awesome 是一套完美的图标字体,主要目的是和 Bootstrap 搭配使用. 提供的CSS 已经可以完美显示这些图标在网页里面.最新的版本4.3 里面,已经提供519 Icon ...
- html5 canvas画图之图形随拖动而复制（有操作指示）
学习html5 canvas,写了一个小练习来加深理解,可以实现图形随拖动而复制. <!DOCTYPE html> <html> <head> <meta c ...
- 8个经典炫酷的HTML5 Canvas动画欣赏
HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...
- 7个惊艳的HTML5 Canvas动画效果及源码
HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...
- HTML5 Canvas 概述
本文中,我们将探索如何使用HTML5的Canvas API.Canvas API很酷,我们可以通过它来动态创建生成和展示图形,图表,图像以及动画.本文将使用渲染API(rendering API)的基 ...
- html5 canvas+js实现ps钢笔抠图
html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...
随机推荐
- Linux命令之rhn_check
NAME rhn_check - check for queued actions on RHN and execute them SYNOPSIS /usr/sbin/rhn_check [-v] ...
- CSS Sprites技术
CSS Sprites技术,国内很多人也叫雪碧图,因为sprite麻 (你买一瓶雪碧就看得到大大的sprite字样了) 主要用于将网站的零碎图标的img标签取代,因为每个img标签引用的src就会造成 ...
- 母函数（Generation Function） 入门 + 模板
转自:母函数 入门 + 模板 感谢 在数学中,某个序列的母函数(Generating function,又称生成函数)是一种形式幂级数,其每一项的系数可以提供关于这个序列的信息.使用母函数解决问题的 ...
- Linux装软件
一.rpm包安装方式步骤: 1.找到相应的软件包,比如soft.version.rpm,下载到本机某个目录: 2.打开一个终端,su -成root用户: 3.cd soft.version.rpm所在 ...
- CString::GetLength()获得字节数
按照MSDN的说吗,在选用MBCS多字节字符串编码时,该方法会得到正确的字节数.此时没有问题. For multibyte character sets (MBCS), GetLength count ...
- 华为上机测试题（MP3光标移动-java）
PS:此题满分,可参考 描述: MP3 Player因为屏幕较小,显示歌曲列表的时候每屏只能显示几首歌曲,用户要通过上下键才能浏览所有的歌曲.为了简化处理,假设每屏只能显示4首歌曲,光标初始的位置为第 ...
- 基于UDT connect连接通信以及文件传输--服务端
网上与UDT相关的资料不多,与UDT相关的源码例子更少.最近在接触UDT,也是因为缺少相关的资料,导致学习起来甚感痛苦.下面将我自己这两天弄出来的代码贴出来,希望对在寻找相关资料的童鞋有一定的帮助.与 ...
- Python基础-列表、元祖
1. 列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 names = ['Alex',"Tenglan",'Eric ...
- xxx.service is not a native service, redirecting to /sbin/chkconfig.
centos7编译安装的程序无法用systemctl 启动 [root@nagios-server check_commands]# systemctl enable npcd.service npc ...
- 用原生javascript实现最简单的发布者-订阅者模式
http://www.cnblogs.com/surahe/p/6065778.html 发布—订阅模式可以广泛应用于异步编程中,这是一种替代传递回调函数的方案.比如,我们可以订阅 ajax 请求的 ...