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中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...
随机推荐
- SpringMVC+MyBatis+Shiro 配置文件详解
1.web.xml文件的配置 <?xml version="1.0" encoding="UTF-8"?> <web-app version= ...
- 【IDEA】IDEA下maven项目无法提示和使用EL表达式的解决办法
今天在IDEA创建web项目之后发现无法使用EL和JSTL, 一.如果JSP中无法自动提示EL表达式,比如${pageContext.request.contextPath},可在pom.xml的&l ...
- 【Git】Git SSH Key 生成步骤
Git是分布式的代码管理工具,远程的代码管理是基于SSH的,所以要使用远程的Git则需要SSH的配置. github的SSH配置如下: 一 . 设置Git的user name和email: $ git ...
- shortcut（NOIP模拟赛）（裸的排序）
原题: Description Mirek有一条每天从他家去大学工作的最喜欢的路.这个路径由若干个部分组成,且每个部分是10米长的直线.每一个部分是直线连接(没有拐弯)上一个部分或垂直连接上一个部分. ...
- msvc交叉编译:使用vcvarsall.bat设置命令行编译环境
一直以来我只知道vc设置命令行编译环境的批处理命令是%VS140COMNTOOLS%/Common7/Tools下的vsvars32.bat,(%VS140COMNTOOLS%为定义vs2015公共工 ...
- 【QC】安装
QC不支持win8 1. 开启win8自带的IIS服务. 在控制面板-程序-启用或关闭Windows功能-Internet Information Service
- 计蒜客 28201.Choosing Ice Cream-gcd (BAPC 2014 Preliminary ACM-ICPC Asia Training League 暑假第一阶段第一场 A)
开始水一波博客 题目链接: A. Choosing Ice Cream 传送门 题意就是n个冰淇淋,骰子有k个面,问你是否能在公平的概率下转几次骰子能确定买哪个冰淇淋. 举个例子,假设我只有一个冰淇淋 ...
- 项目管理软件Readmine安装配置
1.安装依赖 #yum install curl-devel sqlite-devel libyaml-devel -y 2.安装rvm #curl -L https://get.rvm.io | b ...
- 中矿新生赛 H 璐神看岛屿【BFS/DFS求联通块/连通块区域在边界则此连通块无效】
时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 32768K,其他语言65536K64bit IO Format: %lld 题目描述 璐神现在有张n*m大小的地图,地图上标明了陆地(用 ...
- 小白入门篇:flex布局
--前言 因为这个星期写一个小的项目用到flex布局和grid布局,虽然这两种布局都是兼容性都有问题,但是别急,我觉的以后肯定是会发展并且流行起来的,毕竟google大法好,而且这两个布局真的比一般的 ...