分享一款布料效果的 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. java学习笔记3--类与对象的基础

    本文地址:http://www.cnblogs.com/archimedes/p/java-study-note3.html,转载请注明源地址. 1.面向对象的程序设计方法概述 面向对象的程序设计 与 ...

  2. 深入理解java虚拟机笔记之一

    Java的技术体系主要有支撑java程序运行的虚拟机,提供各开发领域接口支持Java API,java编程语言及许多第三方java框架( 如Spring,Structs等)构成. 可以把Java程序设 ...

  3. 论#include

    1.#include " "与#include <> #include " "表示预编译命令源程序在当前项目下寻找头文件,如果找不到,再到标准头文件 ...

  4. DOS命令:列出某目录下的所有文本文件名并重定向到某文件

    命令如下: >dir /b *.txt>output.txt dir无需说,/b 是只要文件名,>是重定向. 2013年11月7日13:36:57

  5. WebView加载网页文件

    转自:http://www.2cto.com/kf/201108/101518.html WebView(网络视图)能加载显示网页,可以将其视为一个浏览器.它使用了WebKit渲染引擎加载显示网页,实 ...

  6. git stash笔记

    日常工作中经常会需要放下手头上的工作,转而去修改之前的某一个bug,此时就需要将现有的改动添加到staging area git add . 然后将这些改动暂时放入一个stack中: git stas ...

  7. MySQL联合多表更新和删除

    多表更新 在 MySQL 3.23 中,你能够使用 LIMIT # 来确保仅仅有给定的记录行数目被更改. 假设一个 ORDER BY 子句被使用(从 MySQL 4.0.0 開始支持),记录行将以指定 ...

  8. Ubuntu 设置UFW防火墙

    1:安装 sudo apt-get install ufw 2:启用 sudo ufw enable sudo ufw default deny 运行以上两条命令后,开启了防火墙,并在系统启动时自动开 ...

  9. SecureCRT 常用配置

    1.SecureFx 中文乱码,应设置成utf-8编码了,依旧乱码 在 C:\Users\root\AppData\Roaming\VanDyke\Config\Sessions 下找到对应的sess ...

  10. sqlserver学习笔记(六)—— sqlserver内置函数(字符串、日期)

    sqlserver中有很多内置函数,这里总结了一些常用的 一.关于字符串的函数: 1.CHARINDEX 寻找一个指定字符串在另一个字符串中的起始位置 SELECT CHARINDEX('world‘ ...