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中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...
随机推荐
- UVA 10229 Modular Fibonacci
斐波那契取MOD.利用矩阵快速幂取模 http://www.cnblogs.com/Commence/p/3976132.html 代码: #include <map> #include ...
- linux 内核库函数 【转】
转自:http://blog.chinaunix.net/uid-20321537-id-1966892.html 当编写驱动程序时,一般情况下不能使用C标准库的函数.Linux内核也提供了与标准库函 ...
- (十)stm32 GPIO口复用，重映射 RCC_APB2Periph_AFIO
什么时候需要用到RCC_APB2Periph_AFIO--复用IO时钟的使用 需要用到外设的重映射功能时才需要使能AFIO的时钟 外部中断(EXTI)中与AFIO有关的寄存器是AFIO-EXTICR1 ...
- DropZone图片上传控件的使用
前台代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...
- mysql故障（程序正在运行却找不到PID文件）
[root@slave ~]# /etc/init.d/mysql status ERROR! MySQL is running but PID file could not be found [ro ...
- [BZOJ2223][BZOJ3524][Poi2014]Couriers 主席树
3524: [Poi2014]Couriers Time Limit: 20 Sec Memory Limit: 256 MBSubmit: 2436 Solved: 960[Submit][St ...
- AC日记——Array Queries codeforces 797e
797E - Array Queries 思路: 分段处理: 当k小于根号n时记忆化搜索: 否则暴力: 来,上代码: #include <cmath> #include <cstdi ...
- （转）MYSQL 的 WITH ROLLUP
使用 GROUP BY 的 WITH ROLLUP 字句可以检索出更多的分组聚合信息,它不仅仅能像一般的 GROUP BY 语句那样检索出各组的聚合信息,还能检索出本组类的整体聚合信息. 下面我们的例 ...
- 51nod 1101 换零钱 【完全背包变形/无限件可取】
1101 换零钱 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 收藏 关注 N元钱换为零钱,有多少不同的换法?币值包括1 2 5分,1 2 5角,1 2 5 ...
- BZOJ1588 营业额统计 （Splay）
营业额统计 营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每天的营业额. ...