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>

本文转自张昺华-sky博客园博客，原文链接：http://www.cnblogs.com/xiandedanteng/p/7488413.html，如需转载请自行联系原作者

HTML5 Canvas 动态勾画等速螺线相关推荐

html5拓扑图图入门,如何使用HTML5 Canvas动态的绘制拓扑图
如何使用HTML5 Canvas动态的绘制拓扑图使用HTML5 Canvas动态的绘制拓扑图: HTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( ...
HTML5 Canvas动态绘制心型线和玫瑰线
1HTML5的Canvas元素提供了丰富的绘图功能,能够使我们制作出许多精美的动画.本次将运用canvas绘制心型线和玫瑰线. 1.心型线和玫瑰线绘制这两种曲线,首先我们分别选用两个参数方程(心型线 ...
html绘制动态小人,JavaScript和html5 canvas如何绘制一个小人的代码
这篇文章主要介绍了JavaScript+html5 canvas绘制的小人效果,涉及JavaScript结合html5 canvas图形绘制及颜色随机填充的技巧,需要的朋友可以参考下本文实例讲述了J ...
HTML5绘制渐变直线,如何使用HTML5 Canvas绘制动态线性渐变
如果要使用HTML5 Canvas绘制线性渐变,需要用到createLinearGradient()方法.下面我们就来一起看看具体的内容. createLinearGradient() createL ...
【物联网智能网关-14】Html5:Canvas+WebSocket实现远程实时通信（下）
在上篇博文<Html5:Canvas+WebSocket实现远程实时通信(上)>中已经介绍了当前实现动态网页的一些基本技术,也说明了在.NET micro framework平台下实现We ...
如何使用HTML5 Canvas元素来裁剪图像
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动.调整大小和裁剪图像,这些技术适用于图片编辑器.照片分享等应用场景.借助HTML5 Canvas绘图功能,可以在浏览器端以比较简 ...
《HTML5 canvas开发详解（第2版）》——1.9　HTML5 Canvas对象
本节书摘来自异步社区<HTML5 canvas开发详解(第2版)>一书中的第1章,第1.9节,作者: [美]Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社 ...
HTML5 Canvas
HTML5 Canvas 转自:https://blog.csdn.net/u012468376/article/details/73350998 一.canvas简介 <canvas&g ...
html5 canvas实际应用,Html5 Canvas入门及经典应用
Html5 Canvas入门及经典应用时间:2019-02-15 来源:华清远见 canvas想必对于前端的工程师都不陌生了,它是 HTML5 新增的「画布」元素,是HTML5 的一大亮点, ...

HTML5 Canvas 动态勾画等速螺线

HTML5 Canvas 动态勾画等速螺线相关推荐

最新文章

热门文章