html2canvas.js按界面元素截屏功能演示

请把代码下载到本地运行，来查看效果。注意修改相关图片链接。

html5, canvas, screenshot

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3826
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .td-nav-tabs {
            padding-left: 0;
            margin-bottom: 0;
            list-style: none;
            height: 50px;
        }
        .td-nav-tabs>li {
            float: left;
            margin-bottom: -1px;
        }
        .td-nav-tabs>li>a {
            color: #337ab7;
            text-decoration: none;
            position: relative;
            display: block;
            padding: 10px 15px;
            border-bottom: 1px solid #ddd;
        }
        .td-nav-tabs>li.active>a,
        .td-nav-tabs>li.active>a:focus,
        .td-nav-tabs>li.active>a:hover {
            color: #555;
            cursor: default;
            background-color: #fff;
            border: 1px solid #ddd;
            border-bottom-color: transparent;
        }
        #capcontent {
            width: 100%;
            height: 360px;
        }
        .col {
            float: left;
            width: 33%;
            text-align: center;
        }
        .footer {
            background: black;
            height: 30px;
            color: white;
        }
        .footer ul {
            list-style: none;
            clear: both
        }
        .footer ul>li {
            float: left;
            width: 33%;
        }
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <ul class="td-nav-tabs">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#">SVN</a>
        </li>
        <li><a href="#">iOS</a>
        </li>
        <li><a href="#">VB.Net</a>
        </li>
        <li><a href="#">Java</a>
        </li>
        <li><a href="#">PHP</a>
        </li>
    </ul>
    <div id="capcontent">
        <div class="col col_1">
            <h2>column 1</h2><img src="/assets/coolboy.jpg">
            <p>And the ridges and furrows of a gecko's ceiling-grasping toes have inspired a glueless adhesive tape.</p>
        </div>
        <div class="col col_2">
            <h2>column 2</h2><a href="javascript:void(0)" onclick="cap(); return false">capture</a>
            <p>And the ridges and furrows of a gecko's ceiling-grasping toes have inspired a glueless adhesive tape.</p>
        </div>
        <div class="col col_3">
            <h2>column 3</h2><img src="/assets/coolgirl.jpg">
            <p>And the ridges and furrows of a gecko's ceiling-grasping toes have inspired a glueless adhesive tape.</p>
        </div>
    </div>

<div class="footer">
        <ul>
            <li>About US</li>
            <li>Contact US</li>
            <li>Links</li>
        </ul>
    </div>
    <script src="/uploads/161101/html2canvas.js"></script>
    <script>
        function cap() {
            var element = document.getElementById('capcontent');
            html2canvas(element, {
                onrendered: function(canvas) {
                    // canvas is the final rendered <canvas> element
                    document.body.appendChild(canvas);
                }
            });
        }
    </script>
</body>

</html>

请把代码下载到本地运行，来查看效果。注意修改相关图片链接。

html5, canvas, screenshot

编辑器支持Emmet

快捷键

请把代码下载到本地运行，来查看效果。注意修改相关图片链接。

html5, canvas, screenshot

html5 canvas simplex-noise.js彩带粒子流动画

html5 canvas猎捉外星人游戏地图显示演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：