基于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 ...
随机推荐
- Unity3D新手教学,让你十二小时,从入门到掌握!(三 ) [转]
版权声明:本文为Aries原创文章,转载请标明出处.如有不足之处欢迎提出意见或建议,联系QQ531193915 这一讲,我会教大家如何写碰撞检测的代码,然后还会教大家如何使用我介绍给大家的第一个Uni ...
- javascript数组去重的4个方法(转)
原文地址:http://blog.csdn.net/chengxuyuan20100425/article/details/8497277 面试前端必须准备的一个问题:怎样去掉Javascript的A ...
- SSIS实践入门1:我的第一个SSIS程序开发
深圳,和你见面已经有23天的时间了,第10天敲定了我人生中的第三份工作,虽说不是和想象中的工作那么好,但是我感觉我已经提前进入了备战状态,接下来我希望自己在你的领土可以有所发展,深圳,一个人多的城市, ...
- 用sc命令查询系统状态
用sc命令查询系统状态 sc query 语法 sc query - Enumerates status for active services & driver ...
- GetXamarin.xambe
GetXamarin.xambe <!DOCTYPE html> <html lang="en" class=""> <head& ...
- 用thinkphp执行原生sql
Controller代码: Demo2Controller.class.php <?php namespace Home\Controller; use Think\Controller; us ...
- OpenERP Web开发
转自:http://blog.csdn.net/mackz/article/details/22581517 在7和8下测试均可. 1.相关库/框架 主要:jQuery(使用1.8.3,如果使用新版本 ...
- oracle的check约束
check约束是指检查性约束,使用check约束时.将对输入的每个数据进行检查,仅仅有符合条件的记录才会被保存到表中,从而保证了数据的有效性和完整性. check约束既有下面的四个特点: 在 ...
- 【BIRT】交叉报表中出现空值设置为默认值
在使用BIRT做交叉报表的时候,往往会出现有些维度下的值是空值,例如如下报表: 那么我们可以为这些空值给出默认值,例如"-" 具体操作如下: 点击上图的[Cross Tab]后选中 ...
- apk签名相关文章
签名详解:https://stackoverflow.com/questions/4245303/android-sf-file 使用不同的keystore,签名后生成SF文件一模一样正常吗? 正常 ...