分享一款布料效果的 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可撕裂布料效果的更多相关文章

  1. 基于HTML5 Canvas 实现的 Loading 效果

    Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...

  2. 经典!HTML5 Canvas 模拟可撕裂布料效果

    这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...

  3. 基于HTML5 Canvas粒子效果文字动画特效

    之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的 ...

  4. 基于HTML5 Canvas生成粒子效果的人物头像

    前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下 ...

  5. 基于HTML5 Canvas实现的图片马赛克模糊特效

    效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...

  6. 基于html5 canvas和js实现的水果忍者网页版

    今天爱编程小编给大家分享一款基于html5 canvas和js实现的水果忍者网页版. <水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版 ...

  7. 基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块

    基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块 前言 最近学习了 HT for Web flow 插件,除了正常的 flow 效果,其中还有两个十分好用的两个接口 getPercen ...

  8. 基于HTML5 Canvas和jQuery 的绘图工具的实现

    简单介绍 HTML5 提供了强大的Canvas元素.使用Canvas并结合Javascript 能够实现一些很强大的功能.本文就介绍一下基于HTML5 Canvas 的绘图工具的实现.废话少说,先看成 ...

  9. 18个基于 HTML5 Canvas 开发的图表库

    如今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐.很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用.HTML 5 规范引进了很多新特性,其中之一就是 Canvas ...

随机推荐

  1. 转:修改Android签名证书keystore的密码、别名alias以及别名密码

    转自:http://blog.k-res.net/archives/1671.html 二月 5, 2014  |  Posted by K-Res   之前在测试Eclipse ADT的Custom ...

  2. win8.1安装开发工具 vs2015 Visual Studio 2015 Preview Downloads

    1.首先全新安装win8.1 略 破解激活.... 2.安装Visual Studio 2015 Visual Studio 2015 是免费的,不存在破解版本, 如果安装过程中存在问题,建议先把本文 ...

  3. systemctl使用

    systemctl start httpd.service 这会启动httpd服务,就我们而言,Apache HTTP服务器. 要停掉它,需要以root身份使用该命令: systemctl stop ...

  4. Ubuntu 14.04安装语言包后无法选择汉语问题解决

    如需转载请标明出处:http://blog.csdn.net/itas109 QQ技术交流群:129518033 安装完语言包后.尽管里面有了汉语.可是是灰色的.例如以下图所看到的: watermar ...

  5. EXPDP/IMPDP与EXP/IMP在不同用户和表空间之间迁移数据的实现方法

    1. EXPDP/IMPDP方式 SQL> create user zlm identified by zlm; User created. SQL> grant connect,reso ...

  6. UNIX网络编程读书笔记:recvmsg和sendmsg函数

    这两个函数是最通用的I/O函数.实际上我们可以把所有read.readv.recv和recvfrom调用替换成recvmsg调用.类似地,各种输出函数调用也可以替换成sendmsg调用. #inclu ...

  7. Bash Shell的环境配置文件

    login shell:取得bash时需要完整的登录流程 non-login shell:取得bash接口的方法不需要重复登录,举例来说,你以x window登录Linux后,再以x的图形界面启动终端 ...

  8. java的21个技术点归纳学习

  9. ant design pro (十一)advanced Mock 和联调

    一.概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的 ...

  10. ubuntu执行级别,设置单用户模式

    redhat的runlevel级别定义例如以下:   0:关机.不能将系统缺省执行级别设置为0,否则无法启动. 1:单用户模式.仅仅同意root用户对系统进行维护. 2:多用户模式.但不能使用NFS( ...