基于HTML5 Canvas可撕裂布料效果
分享一款布料效果的 HTML5 Canvas 应用演示,效果逼真。你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果。

实现的代码。
html代码:
<canvas id="c"></canvas>
<div id="info">
<p>
<br>
- 使用鼠标可以拉扯
<br>
<br>
- 右键可以切断布料
<br>
<br>
</p>
</div>
<script type="text/javascript">
document.getElementById('close').onmousedown = function (e) {
e.preventDefault();
document.getElementById('info').style.display = 'none';
return false;
};
</script>
<script type="text/javascript" src="Cloth.js"></script>
<div class="footer-banner" style="width: 728px; margin: 30px auto">
</div>
css代码:
.top-banner
{
background-color: #666;
}
a
{
font-size: 13px;
}
#info
{
position: absolute;
left: -1px;
top: 30px;
}
#c
{
display: block;
margin: 60px auto 0;
}
via:http://www.w2bc.com/Article/26253
基于HTML5 Canvas可撕裂布料效果的更多相关文章
- 基于HTML5 Canvas 实现的 Loading 效果
Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...
- 经典!HTML5 Canvas 模拟可撕裂布料效果
这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...
- 基于HTML5 Canvas粒子效果文字动画特效
之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的 ...
- 基于HTML5 Canvas生成粒子效果的人物头像
前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下 ...
- 基于HTML5 Canvas实现的图片马赛克模糊特效
效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...
- 基于html5 canvas和js实现的水果忍者网页版
今天爱编程小编给大家分享一款基于html5 canvas和js实现的水果忍者网页版. <水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版 ...
- 基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块
基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块 前言 最近学习了 HT for Web flow 插件,除了正常的 flow 效果,其中还有两个十分好用的两个接口 getPercen ...
- 基于HTML5 Canvas和jQuery 的绘图工具的实现
简单介绍 HTML5 提供了强大的Canvas元素.使用Canvas并结合Javascript 能够实现一些很强大的功能.本文就介绍一下基于HTML5 Canvas 的绘图工具的实现.废话少说,先看成 ...
- 18个基于 HTML5 Canvas 开发的图表库
如今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐.很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用.HTML 5 规范引进了很多新特性,其中之一就是 Canvas ...
随机推荐
- C#连接SQL Server数据库进行简单操作[转]
环境:VS2010 + SqlServer 2008 首先,按照面向对象的程序设计思想,设计一个数据库操作工具类MyTool.cs,该类中封装了关于数据库连接和操作的方法,各个功能模块在需进行数据库操 ...
- 红帽RHOP 8 发布一条龙方案
导读 日前,Canonical的Ubuntu在OpenStack的云系统方面处于业界领先地位.其他诸如IBM类顶级科技公司也有意加入OpenStack的混战,新的专用OpenStack公司(例如Mir ...
- “建议127:Lock与synchronized是不一样的问题”实际验证
近期又一次翻看 "编写高质量代码:改善Java程序的151个建议" 一书的时候看到"建议127"的文章中作者提供的測试用例存在一些值得商榷的地方. 在使 ...
- .NET破解之繁星代码生成器
本教程只能用于学习研究,不可进行任何商业用途.如有使用,请购买正版,尊重他人劳动成果和知识产权! 对象:繁星代码生成器0.96 环境:Win7 x64 工具:exeinfoPE(查壳).de4dot ...
- Java注解与自己定义注解处理器
动机 近期在看ButterKnife源代码的时候.竟然发现有一个类叫做AbstractProcessor,并且ButterKnife的View绑定不是依靠反射来实现的,而是使用了编译时的注解,自己主动 ...
- 用sql语句查出和sql相关的性能计数器
一台服务器上,用性能监视器死活显示不出来一部分计数器,没办法,用sql语句查了 --所有和sql相关的计数器 select * from sys.dm_os_performance_counters ...
- knockoutjs -- all built-in buildings
所有可用的binding值 文字和显示:visible, text, html, css, style, attr 流程控制:foreach, if, ifnot, with form字段:click ...
- Appium环境的安装与配置,Python测试脚本测试
Appium自动化测试系列1 - Appium环境的安装与配置 发表于4个月前(2015-01-27 14:34) 阅读(803) | 评论(0) 0人收藏此文章, 我要收藏 赞0 寻找 会’偷懒 ...
- 逻辑回归的相关问题及java实现
本讲主要说下逻辑回归的相关问题和详细的实现方法 1. 什么是逻辑回归 逻辑回归是线性回归的一种,那么什么是回归,什么是线性回归 回归指的是公式已知,对公式中的未知參数进行预计,注意公式必须是已知的,否 ...
- vmware-Binary translation is incompatible with long mode on this platform
解决方法:Binary translation is incompatible with long mode on this platform. Disabling long mode. Withou ...