分享一款布料效果的 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. CentOS7 rpm方式安装mysql5.7

    内容源自:CentOS7安装mysql 在CentOS中默认安装有MariaDB,这个是MySQL的分支,但为了需要,还是要在系统中安装MySQL,而且安装完成之后可以直接覆盖掉MariaDB. 1. ...

  2. Codeforces Round #250 (Div. 1) D. The Child and Sequence

    D. The Child and Sequence time limit per test 4 seconds memory limit per test 256 megabytes input st ...

  3. android 程序更新(没有sdcard)

    今天总结一下我们写的程序需要更新(默认用户已经安装上旧版本了),而用户更新时却没有sdcard的情况,如果有sdcard,那就不用废话了... 先说一下软件更新的基本原理,从服务器下载一个程序的apk ...

  4. Maven--要点笔记

    --maven笔记 1.maven命令 2.archetype插件:用于创建符合maven规定的文件夹骨架   命令: mvn archetype:generate 3. 坐标:构件 仓库: 本地仓库 ...

  5. ERP,SCM,CRM,BRP,OMS,WMS 企业管理的6大核心系统

    [导读]:人体共有八大系统:运动系统.神经系统.内分泌系统.循环系统.呼吸系统.消化系统.泌尿系统.生殖系统.这些系统协调配合,使人体内各种复杂的生命活动能够正常进行. 同理,企业要想健康的运转,长久 ...

  6. getAttribure()和getParameter()的区别

    1.getAttribute是取得jsp中 用setAttribute设定的attribute 2.parameter得到的是string:attribute得到的是object 3.request. ...

  7. mybatis实战教程(mybatis in action)之四:实现关联数据的查询

    有了前面几章的基础,对一些简单的应用是可以处理的,但在实际项目中,经常是关联表的查询,比如最常见到的多对一,一对多等.这些查询是如何处理的呢,这一讲就讲这个问题.我们首先创建一个Article 这个表 ...

  8. angularjs-1

    1.属性表达式 属性表达式计算是发生在作用域中的.Javascript默认是以window为作用域的.AngularJS要使用window作用域的话得用$window来指向全局window对象. 比如 ...

  9. SQL 横转竖 、竖专横 (转载) 使用Dapper.Contrib 开发.net core程序,兼容多种数据库 C# 读取PDF多级书签 Json.net日期格式化设置 ASPNET 下载共享文件 ASPNET 文件批量下载 递归,循环,尾递归 利用IDisposable接口构建包含非托管资源对象 《.NET 进阶指南》读书笔记2------定义不可改变类型

    SQL 横转竖 .竖专横 (转载)   普通行列转换 问题:假设有张学生成绩表(tb)如下: 姓名 课程 分数 张三 语文 74 张三 数学 83 张三 物理 93 李四 语文 74 李四 数学 84 ...

  10. sql中一列拆成两列

    declare @table table (name nvarchar(4))insert into @tableselect '张三' union allselect '李四' union alls ...