- 浏览: 332434 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
327764984:
CommonSql里不知道把PreparedStatment和 ...
Connection.setAutoCommit使用的注意事项 -
netwelfare:
文章讲解的不详细啊,很多东西没有讲解出来。看到这篇文章讲解的挺 ...
java字符串的拆分 lang.String.split -
iceage1980:
博主你好 我用了你这个代码 为什么总是在 if (this. ...
MD5 码 校 验 -
wisdomtl:
最后一段代码有写小的错误最后一个具体工厂的实现应该返回Cowb ...
JAVA设计模式之工厂模式 -
jateide:
网上随便转载的东西,自己都没有经过使用,好意思发出来,而且还不 ...
正则表达式中后向引用、零宽断言、负向零宽断言的解释用法
把现实世界当中的物体模拟到计算机当中,一些简单的物理实验、碰撞旋转等等难度还是不算很大,难度较大的应当算流体模拟。
本文将在Canvas当中模拟出一个2D平面内的水珠,涉及的知识点和技巧包括:Jscex基础知识,贝塞尔曲线的绘制,合理利用CanvasRenderingContext2D的translate和rotate等API。
绘制椭圆
在模拟水滴之前,我们先思考一下怎么在canvas当中绘制一个椭圆。
大家可以很容易想到 下面几种方案:
1.根据椭圆笛卡尔坐标系方程绘制
2.根据椭圆极坐标方程绘制
3.根据椭圆曲率变化绘制
4.利用四条贝塞尔曲线绘制
第四中,也是性能最好的一种,这样可以避免复杂的计算,充分利用CanvasRenderingContext2D的API(API的性能是通过严格测试,一般情况下比较靠谱).
所以我们采用第四种方式来绘制椭圆。
var ctx;
canvas = document.getElementById("myCanvas1");
ctx = canvas.getContext("2d");
ctx.strokeStyle = "#fff";
function drawEllipse(x, y, w, h) {
var k = 0.5522848;
var ox = (w / 2) * k;
var oy = (h / 2) * k;
var xe = x + w;
var ye = y + h;
var xm = x + w / 2;
var ym = y + h / 2;
ctx.beginPath();
ctx.moveTo(x, ym);
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
ctx.stroke();
}
ctx.clearRect(0,0,canvas.width,canvas.height);
drawEllipse(10, 10, 40, 82);
(改变drawEllipse的四个参数试试)
旋转椭圆
这里的旋转不是绕上面的drawEllipse的前两个参数x,y旋转,二是绕椭圆的中心旋转。所以仅仅CanvasRenderingContext2D.rotate是不够的,因为CanvasRenderingContext2D.rotate是绕画布的左上角(0,0)旋转。所以我们先要把(0,0)通过CanvasRenderingContext2D.translate到椭圆的中心,然后再drawEllipse(-a/2, –b/2, a, b).
上面这句话,就是绕中心旋转的核心。这里还可以推广到任意图形或者图片(假设有约定的中心)。如图:
然后我们就可以先绘制一个鸟巢出来:
<head>
<script src="http://files.cnblogs.com/iamzhanglei/jscex.jscexRequire.min.js" type="text/javascript"></script>
</head>
<body>
<style type="text/css">
input.css3btn
{
background: -moz-linear-gradient(270deg, #d2ebf8, #0c8ab5);
background: -webkit-linear-gradient(top, #d2ebf8, #0c8ab5);
background: -o-linear-gradient(top, #d2ebf8, #0c8ab5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#000099CC', EndColorStr='#FF0087B4');
border-top: 1px solid #38538c;
border-right: 1px solid #1f2d4d;
border-bottom: 1px solid #151e33;
border-left: 1px solid #1f2d4d;
border-radius: 4px;
box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 2px 0px #1f3053, 0 4px 4px 1px #111111;
color: #f0f0f0;
font: bold 20px "helvetica neue" , helvetica, arial, sans-serif;
padding: 10px 0 10px 0;
text-align: center;
text-shadow: 0px -1px 1px #1e2d4d;
width: 150px;
background-clip: padding-box;
}
input.css3btn:hover
{
box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 3px 0px #1f3053, 0 4px 4px 1px #111111;
cursor: pointer;
}
input.css3btn:active
{
box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
margin-top: 1px;
}
</style>
<canvas id="myCanvas2" width="350" height="350" style="border: solid 15px #222; background-color: #111;
color: #CCC;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas;
var ctx;
var px = 0;
var py = 0;
function init() {
canvas = document.getElementById("myCanvas2");
ctx = canvas.getContext("2d");
ctx.strokeStyle = "#fff";
ctx.translate(70, 70);
}
init();
var i = 0;
function drawEllipse(x, y, w, h) {
var k = 0.5522848;
var ox = (w / 2) * k;
var oy = (h / 2) * k;
var xe = x + w;
var ye = y + h;
var xm = x + w / 2;
var ym = y + h / 2;
ctx.beginPath();
ctx.moveTo(x, ym);
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
ctx.stroke();
ctx.translate(x + 70, y + 100);
px = -70;
py = -100;
ctx.rotate(10 * Math.PI * 2 / 360);
}
var ct;
var drawAsync = eval(Jscex.compile("async", function (ct) {
while (true) {
drawEllipse(px, py, 140, 200)
$await(Jscex.Async.sleep(200, ct));
}
}))
function Button1_onclick() {
ct.cancel();
}
function Button2_onclick() {
ct = new Jscex.Async.CancellationToken();
drawAsync(ct).start();
}
</script>
<br />
<input id="Button2" class="css3btn" type="button" value="run" onclick="return Button2_onclick()" />
<input id="Button1" class="css3btn" type="button" value="stop" onclick="return Button1_onclick()" />
</body>
</html>
绘制水滴
旋转的椭圆和鸟巢神马的和水滴有什么关系呢?
我们通过改变椭圆的长轴和短轴,令其非常接近圆形(只能接近,不能等于圆形),然后每次旋转擦除画布,就可以达你预想不到的效果!
这里需要注意的是,擦除画布不再是一句CanvasRenderingContext2D.clearRect(0,0,canvas.width,canvas.height)就可以,因为画布已经旋转和画布原点已经translate,所以我们使用 ctx.clearRect(-canvas.width, -canvas.height, 2 * canvas.width, 2 * canvas.height)来擦除画布。
我们画一个长轴42,短轴40的椭圆,旋转并擦除画布:
ctx.clearRect(-canvas.width, -canvas.height, 2 * canvas.width, 2 * canvas.height);
var k = 0.5522848;
var ox = (w / 2) * k;
var oy = (h / 2) * k;
var xe = x + w;
var ye = y + h;
var xm = x + w / 2;
var ym = y + h / 2;
ctx.beginPath();
ctx.moveTo(x, ym);
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
ctx.stroke();
ctx.translate(x + 20, y + 21);
px = -20;
py = -21;
ctx.rotate(10 * Math.PI * 2 / 360);
}
var ct;
var drawAsync = eval(Jscex.compile("async", function (ct) {
while (true) {
drawEllipse(px, py, 40, 42)
$await(Jscex.Async.sleep(10, ct));
}
}))
会是什么效果呢?
在线演示效果查看http://www.cnblogs.com/iamzhanglei/archive/2011/12/12/2284188.html
发表评论
-
js match 的简单用法 [转]
2014-06-05 14:41 1248/* js match 的用法 */var href,rs, ... -
JavaScript的replace方法与正则表达式结合应用讲解(转)
2013-09-27 17:02 846replace方法的语法是:stringObj.replac ... -
jquery内容过滤选择器、属性过滤选择器和jquery可见度过滤选择器(转)
2012-07-12 10:56 3347一、 jquery内容过滤选择器 根据内容进行选择 ... -
Jquery获取select,dropdownlist,checkbox 下拉列表框的值(转)
2012-07-11 16:18 1422jQuery获取Select选择的 ... -
Jquerr 中ajax和eche遍历等问题
2012-07-08 14:25 1426众所周知,jquery作为轻量级的js框架,已经应用到了很多方 ... -
利用jquery操作select下拉列表框(转)
2012-07-07 20:33 1066例: <select id=" ... -
HTML锚点(转)
2012-07-02 16:06 1350以前只是知道有锚点这么个东西,一直没有用到,昨天做毕设 ... -
jQuery.extend 函数详解(转)
2012-06-20 09:49 999JQuery的extend扩展方法: ... -
jQuery Datepicker 选择指定日期【转】
2012-05-21 14:17 3873要求是日期只能选择每个月的1号,其它都不能选择。 ... -
DatePicker基本使用方法 【转】
2012-05-08 11:01 4217一个不错的地址,用来DIY jQuery UI界面效果的 ... -
使用 JSONP 实现跨域通信,第 2 部分: 使用 JSONP、jQuery 和 Yahoo! 查询语言构建 mashup(转)
2012-03-27 16:58 1536简介 在本系列的第 1 ... -
使用 JSONP 实现跨域通信,第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup(转)
2012-03-27 16:57 914简介 Asynchronous JavaScript ... -
keyCode charCode 详解
2012-03-27 11:33 1511键盘事件拥有两个属性, keyCode 和 CharCo ... -
JavaScript 键盘键值大集合
2012-03-27 10:01 4171JavaScript【keyCode】 JavaSc ... -
document.createElement()的用法 (转)
2012-03-16 11:09 1184分析代码时,发现自己的盲点——document.createE ... -
红薯 50+ 个 JavaScript & HTML5 框架以及相关工具(转)
2012-03-16 09:58 2338全堆栈框架和工具包 jQuery License: ... -
正则表达式中后向引用、零宽断言、负向零宽断言的解释用法
2012-03-08 15:02 2220正则表达式中后向引用 ... -
JavaScript正则表达式基础
2012-03-08 13:40 982创建一个正则表达式 第一种方法: var reg = /pat ... -
javascript 正则表达式(转)
2012-03-08 13:28 944一 javascript正则表达式的基本知识 1 ... -
弹出层页面
2011-12-20 11:11 1227弹出层的一个小例子 <head> ...
相关推荐
机械设计试验机sw20可编辑非常好的设计图纸100%好用.zip
JSP基于WEB的图书馆借阅系统的设计与实现(源代码+论文)
1_6_huh猫(扭曲声音)_分p整合猫meme素材90+(持续更新中).mp4
【超炫购物模板】仿拍鞋网商城首页触屏版html5手机wap购物网站模板下载.zip
国内外顶尖评级方法 中诚信评级方法汇总 18个行业评级指标体系文档 募集+法律意 见书+评级报告案例 穆迪评级方法 某公司债券募集说明书及评级报告-经典案例 国 内外顶尖评级方法.part2.rar (13.32 MB)
Unity3D版本游戏源码2-119美食游戏模板—Restaurant & Cooking Starter Kit 1.72提取方式是百度网盘分享地址
LNMP部署wordpress
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
●论文复刻● 中国式融资融券与企业金融化 ——基于分批扩容的准自然实验 通过本案 例可以学习到什么 从基础数据整理到最后的结果输出的完整案例 基础结果:描述性统计 、相关系数矩阵、双重差分回归、绘制走势图 如何对缺失值和异常值处理(缩尾处理) 输出表格结果 组间差异检验 动态平行趋势检验 稳健性检验方法 倾向得分匹配PSM 替换被解释变量 控制省份固定效应 改变计量方法,采用个体和时间上的双重聚类调整 剔除IPO当年的样本 企业金融化的动机(套利动机、股价崩盘) 进一步研究(考察 管理层持股和机构投资者持股的差异、考察产品市场竞争的差异、考察股票市场行情的差异 ) 学习到论文实证分析中常用的命令(merge、logout、esttab、ps match2、cluster2、coefplot、ttest、ranksum等) 内容丰富,绝对超值,建议先下载文献看看,有需要可以下载系统学习,其他相关主题的 论文可速成 模型说明 变量定义 变量符号 定义与度量方式 Fin 企业金融化,金 融资产/总资产 Post List 虚拟变量,公司股票成为融资融券标的以后年度的 样本取值为1;否
触屏版html5响应式手机app网站模板下载 触屏版html5响应式手机,自适应手机wap
VOC2-1-2-2-2-2-2
从头开始训练SSD-python源码.zip
基于faster-rcnn实现的行人检测算法python源码+项目说明+详细注释.zip 使用方法: 1.编译安装faster-rcnn的python接口,代码在:https://github.com/rbgirshick/py 2.下载训练好的caffe模型,百度云链接为:https://pan.baidu.com/s/1w479QUUAwLBS2AJbc-eXIA,将下载的模型文件放到faster-rcnn文件夹的data/faster_rcnn_models文件夹中 3.将本项目中的文件夹替换安装好的faster-rcnn源码中的文件夹 4.使用tools文件夹下的测试脚本运行demo:python person_detect.py
基于Torch Hub的yolo5和ssd推理-python源码.zip
机械设计工件气压测试平台sw18非常好的设计图纸100%好用.zip
JSP机房上机收费管理系统(源代码+论文+外文翻译)
基于Torch Hub的深度估计模型MiDaS-python源码.zip
01. 完整作业流程.xls
2024五一杯b题,c&c++课程设计KTV歌曲系统,学生档案管理系统,个人收支系统,职工管理系统等
触屏版自适应手机wap软件网站模板 触屏版自适应手机wap软件网站模板