基于HTML5 Canvas可撕裂布料效果

weixin_34189116

于 2015-03-09 13:52:00 发布

阅读量247

点赞数

文章标签： javascript ViewUI

本文分享了一个利用HTML5 Canvas实现的布料效果应用演示，仅用少量代码即可创造出令人惊叹的真实感布料动画。用户可以通过鼠标操作来拉扯或切断布料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分享一款布料效果的 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;
        }