资讯频道 → Web前端
阅读更多

22顶
0踩

Web前端

原创新闻 利用Canvas 创建出非常真实的效果

2010-03-04 17:08 by 副主编 zly06 评论(20) 有11464人浏览
Ajax

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Andrew Hoyer使用Canvas ，并结合了一些物理特性创作出了 Cloth ，模拟出了非常真实的效果：

点击图片进入真实的演示，你可以选择“线”图，也可以选择“点”图，效果非常震撼。

 

这是他之前的其他创造代码： fast vector, constraints

 

这是Cloth的代码：cloth itself

  • 大小: 35.9 KB
22
顶
0
踩
评论 共 20 条 请登录后发表评论
20 楼 geminiyellow 2010-03-05 20:05
javahead 写道
本来对canvas充满了期待，但是看到这个样例，这么简单的东西，在FF下CPU竟然占到40%，彻底失望了

真的，不是这个东西的问题。
19 楼 javahead 2010-03-05 17:00
本来对canvas充满了期待，但是看到这个样例，这么简单的东西，在FF下CPU竟然占到40%，彻底失望了
18 楼 nail2008 2010-03-05 15:20
好好感受吧 web3.0时代到来了
JE现在有HTML5 专题吗？期待大牛们了
17 楼 httpclient_bd 2010-03-05 13:56
Mark了，很有创意阿
16 楼 liu78778 2010-03-05 11:24
太诡异了，无法将布拧成一股。。。
15 楼 liu78778 2010-03-05 11:23
我想利用力学原理给窗帘打个结。。。都不行。。。
14 楼 EldonReturn 2010-03-05 10:21
这个弄个数学模型+创意就行
比如它这个的约束就是这么算的
function Constraint(p1,p2,rl){
	this.p1 = p1;
	this.p2 = p2;
	this.rest_length = rl||p1.currentPosition().subtract(p2.currentPosition()).length();
	this.squared_rest_length = this.rest_length*this.rest_length;
}
Constraint.prototype = {
	draw: function() {
		//draw a line from p1 to p2
		canvas.line(this.p1.currentPosition(),this.p2.currentPosition());
	},
	satisfy: function() {
		var p1 = this.p1.currentPosition();
		var p2 = this.p2.currentPosition();
		var delta = p2.subtract(p1);
		
		var p1_im = this.p1.inv_mass;
		var p2_im = this.p2.inv_mass;
		
		/*
		var delta_len = 0.5*(this.rest_length+(delta.squaredLength()/this.rest_length));
		var diff = (delta_len-this.rest_length)/(delta_len*(p1_im+p2_im));
		*/
		var d = delta.squaredLength();
		var diff = (d-this.squared_rest_length)/((this.squared_rest_length+d)*(p1_im+p2_im));
		if(p1_im!=0){
			this.p1.setCurrentPos( p1.add(delta.multiply(p1_im*diff)) );
		}
		if(p2_im!=0){
			this.p2.setCurrentPos( p2.subtract(delta.multiply(p2_im*diff)) );
		}
	},
	
	
}
13 楼 minzaipiao 2010-03-05 10:13
raphaelhttp://raphaeljs.com/比canvas还牛，api简单易用
单他是用svg,vml做图的
12 楼 need_faith 2010-03-05 10:05
很神奇
11 楼 shinezhou 2010-03-05 09:56
厉害.


10 楼 Snow_Young 2010-03-05 09:52
ring09h 写道
IE8下报错。。。

都说了是Canvas了……
9 楼 conmind 2010-03-05 09:36
ff下面能加点，chrome下不能打点
8 楼 gml520 2010-03-05 09:31
ring09h 写道
IE8下报错。。。

IE8 好不支持Html5
7 楼 sevk 2010-03-05 09:12
不错，就是需要用js ，不能用Html5 吗。
6 楼 by5739 2010-03-05 08:56
chrome下完美
5 楼 ring09h 2010-03-05 08:32
IE8下报错。。。
4 楼 kuchaguangjie 2010-03-05 00:57
太玄了！！！
3 楼 fansofjava 2010-03-05 00:31
CPU占用并不是很高，这种效果非常好！
2 楼 weiqingfei 2010-03-04 17:24
cpu占用飙升
1 楼 phenom 2010-03-04 17:10
javascript需要很不错的功底吧.
要傻子都能做的才好

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 轻量级可扩展的PHP开发框架(erPhp)

    erPhp框架是一个轻量级的微型的PHP开发框架，其支持多语言,权限控制,功能模块化,多数据库连接,及页面缓存和编译缓存,其模板引擎是使用流行的smarty做为模板引擎,前端JS比较自由默认使用jquery,支持多种session存储方式，支持多级配置文件

  • PHP框架详解 - Symfony框架

    Symfony框架的诞生背景早期的Web开发面临着诸多挑战，如代码的重复性高、维护困难、开发效率低下等。为了应对这些问题，Fabien Potencier 于 2004 年开始构思并着手开发一个新的 PHP 框架，旨在提供一种更高效、更灵活的开发方式。发展历程Symfony 框架于 2005 年首次发布，此后不断演进和完善。在发展过程中，它经历了多次重要的版本更新，每次更新都引入了新的特性和改进。例如，优化了性能、增强了安全性、丰富了组件功能等。

  • php eureka客户端,Spring Cloud Eureka 注册与发现操作步骤详解

    在搭建Spring Cloud Eureka环境前先要了解整个架构的组成，常用的基础模式如下图：服务提供者：将springboot服务编写好以后，通过配置注册中心地址方式注册，提供给消费者使用。注册中心：服务的中间桥梁，服务提供者将服务注册。服务消费者可以通过注册信息调用需要使用的服务。服务消费者：通过规定的调用方式，读取注册中心的注册信息，调用相应的服务。根据后续的服务复杂度进化以后，可以看到服...

  • php 各种框架优缺点

    一直以来，phper讨论最多的就是php各种框架的优缺点，网上的资料也是比较零散，先把几款主流的框架收集汇总一下，其中本人只是用过Yii2、Laravel、Yaf、Thinkphp这四种框架，因此大部分对各种框架的评价皆来自与网上资料，如果问题，请在评论中指出，共同进步 一、ThinkPHP ThinkPHP(FCS)是一个轻量级的中型框架，是从Java的Struts结构移植过来的

  • ThinkPHP是为了简化企业级应用开发和敏捷WEB应用开发而诞生的

    ThinkPHP是为了简化企业级应用开发和敏捷WEB应用开发而诞生的。最早诞生于2006年初，2007年元旦正式更名为ThinkPHP，并且遵循Apache2开源协议发布。

  • 使用Eureka做服务发现(一)

    使用Eureka做服务发现 Zookeeper做注册中心的缺陷 Peter Kelley(个性化教育初创公司Knewton的一名软件工程师)发表了一篇文章说明为什么ZooKeeper用于服务发现是一个错误的做法，他主要提出了三个缺点[1]： ZooKeeper无法很好的处理网络分区问题，当网络分区中的客户端节点无法到达Quorum时，会与ZooKeeper失去联系，从而也就无法使

  • php开发微服务注册到eureka中(使用sidecar)

    使用php开发微服务，注册到eureka中的解决方案：sidecar。 sidecar 介绍请见：https://blog.csdn.net/qq_32971807/article/details/53742783       POM文件    <groupId>com.ylm</groupId> <artifactId>side_car_tes...

  • php+thinkphp+mysql开发的erp系统

    这套是由php+thinkphp+mysql开发的erp 提供大家学习，使用之前要导入数据库， 后直接访问使用 账号密码我写在使用说明里的

  • php生成静态html的企业网站管理系统 整站源码 我见过最好用的！

    【软件功能特点】 　　 一、强大的模板引擎技术 　　企业网站管理系统借鉴了Discuz的模板技术，实现了MVC模式，模板全面标签化，只需懂得简单的html语言就能打造一个漂亮的网站； 　　 　　二、无限极分类，自由选取模块。 　　实现递归无限级分类，每个分类可自定义模块，自选模块； 　　三、模版、插件共分享资源无限 　　模版，方便地安装插件、模版、边框；采用积分机制激励插件、模版的DIY开发和资源分享，越来越丰富的资源让您的网站越来越丰富多彩； 　　四、邮件订阅及群发功能 　　邮件订阅及邮件群发功能，后台轻松实现邮件营销，让您的企业通过互联网快速向外传播； 　　五、良好的用户体验 　　采用JQUERY、AJAX等前端技术，注重用户友好度和用户体验； 　　六、网站地图(sitemap.xml) 　　生成生成Google网站地图，通过Google工具，让搜索引擎快速收录最新发布的页面； 七、平滑的静态网页生成 基于AJAX的平滑静态网页技术，生成静态网页，提高网站访问效率，有利搜索引擎收录。 【安装】 　　请注意备份原有数据库内容，以免覆盖。 　　1.下载并解压缩文件包，上传至服务器或主机空间 　　 2.在浏览器地址栏中输入:http://你的域名/install.php进入安装界面; 　　3.按步骤安装系统。 　　4.进入http://你的域名/admin用自己设置的管理用户名字和密码登录后台进行初始设置.

  • 四款强大的PHP代码生成器 - 开发工具

    一般来说，用PHP和MySQL编写一个数据库应用程序都会花费很多时间和精力 -你要设计HTML格式，编写查询，执行验证/错误处理，测试应用程序等大量工作。PHP代码生成器会自动生成所需的所有HTML，CSS和PHP文件的应用程序，可以节省你大量的时间并降低开发成本。 下面介绍4个PHP代码生成器： 1、ScriptCase PHP代码生成器 Scriptcase 是一款专业高效的P...

  • PHP已从爱好者步进入企业级应用

        “PHP (超文本预处理)正在超越爱好者和学术界进入企业”，Zend科技CEO周二在加利福尼亚州圣克拉拉市举办的2008 Zend/PHP会议的主题演讲中如是强调。　　根据一份服务器端脚本平台的企业用户名单，其中包括Kargo移动和嘉康利，Zend公司的CEO Harold Goldberg强调了PHP的成长。他说：“PHP已经成长为一门支柱企业的语言”。　　Goldberg 说“

  • php eureka客户端,五、eureka客户端自动配置

    所有文章正文前面的几篇文章中，我们从eureka Server端的角度看了看eureka的几个核心要点。本文开始，将从eureka client端的角度了解它。同样的，基于spring cloud的eureka client将先看看它的自动配置。@EnableDiscoveryClient开关自动注册服务我们先从注解开始，注解意味着开启了eureka client@SpringBootApplic...

  • 企业微信发送应用消息php,企业微信如何发送应用消息？及时发布重要通知

    很多企业以前向员工发布通知的时候，要么是通过开会的方式传达，要么是通过文档的方式来通知员工。可是这样效率低，而且结果往往通知不到位。故此，现在很多企业开始使用企业微信发送应用消息来发布内部的重要通知。可是也有很多刚使用企业微信的用户不了解怎么操作，所以，本文将和大家讲解企业微信如何发送应用消息，令消息快速且准确地传达至员工。企业微信如何发送应用消息？1、首先，用户登录企业微信管理后台。在后台的应用...

  • 钉钉第三方企业应用开发 PHP第二版

    上篇说到第三方企业应用要使用到钉钉云 可以先阅读以下钉钉开发平台的这一篇文章： 其实最主要的是在 这里填写你的MYSQL连接地址，然后在你填写的数据库服务器地址中创建一个 这样的库，方便钉钉平台向我方实时推送安装应用的授权企业信息。 2.相关信息都配置好后，我们就要开始进行体验啦，但是在开发阶段，因为我们的是测试应用 所以，我们就要自己创建体验组织 创建体验组织后（相当于又创...

  • php企业应用,PHP企业级应用缓存技术详解

    之前我们曾深入的探讨过PHP缓存技术，其中主要提到了数据缓存。数据缓存主要是指数据库查询缓存，每次访问页面的时候,都会先检测相应的缓存数据是否存在，如果不存在，就连接数据库，得到数据， 并把查询结果序列化后保存到文件中，以后同样的查询结果就直接从缓存表或文件中获得。用的最广的例子看Discuz的搜索功能，把结果ID缓存到一个表中，下次搜索相同关键字时先搜索缓存表。举个常用的方法，多表关联的时候，把...

  • 基于eureka的服务注册发现demo

    eureka基本架构 Eureka基本架构如图 其中涉及到3中角色： 服务注册中心：作为eureka的一个server，提供服务注册和发现的功能。 服务提供者：作为eureka的一个客户端组件，可以对外提供服务。 服务消费者：作为eureka的一个客户端组件，用来消费服务。 服务消费的基本过程如下：首先需要一个服务注册中心eureka server，服务提供者eureka clie...

  • PHP企业开发攻略 – 初学者必看

    前言： 在我读到过的几乎所有文章、书籍或者网络日志中，“PHP不能做企业开发”（或者类似的语言）都被那些所谓的“砖家”放在嘴边。这简直是胡说八道！无耻至极！只有那些光说不练的人有这样的心态！ PHP不仅是Web开发的能手，对于企业开发，同样擅长。 一、学习目标 学习PHP

  • 程序员必备php十大开源框架

    PHP是当今流行的编程语言之一。特别是在国内,PHP是大部分web项目的首选,甚至很多公司从其它语言转到了PHP。PHP的开发成本低,周期短,后期维护费用低,开源产品丰富等成为了它广受欢迎的原因。 善用开源软件能够有效降低软件开发成本,提高工作效率。好的程序员一定要了解你所从事的领域中有哪些开源软件可以为你所用。DevStore在本专题中推荐了PHP开发领域中最流行的十个开源框架,开发者可根

  • PHP离企业级还有很大的差距

    由于以前一直进行的是java ee的编程，所以自然会对java和php有一些比较。php有着简洁的语法，丰富的函数、用于跨平台的能力，有着LAMP,WAMP等出色的平台组合，是进行敏捷开发不一个比较好的选择。它可以进行快速的web开发，尤其是一些网站、Blog、论坛等性质的web应用。但通过对phpcms代码的分析，也发现了许多php的不足，这对于php进入企业级可

  • 从 PHP 脚本中访问企业应用程序 使用 PHP 5 SOAP 扩展访问 WebSphere Web 服务

    Caroline Maynard （caroline.maynard@uk.ibm.com） , 软件工程师, IBM UK LaboratoriesGraham Charters （charters@uk.ibm.com） , 软件工程师, IBM UK LaboratoriesMatthew Peters （matthew_peters@uk.ibm.com） , 软件工程师, IBM UK

Global site tag (gtag.js) - Google Analytics