js 利用canvas标签画一个存储按钮（附加svg动态按钮）

最新推荐文章于 2023-04-28 11:01:00 发布

csmzl

最新推荐文章于 2023-04-28 11:01:00 发布

阅读量3.6k

点赞数

分类专栏： JS和JQuery 文章标签： canvas svg 实例 js 存储

本文链接：https://blog.csdn.net/csmzl/article/details/53996412

版权

本文通过canvas绘制并结合svg实现了一个动态的存储按钮实例，包括详细的生成效果图。

摘要由CSDN通过智能技术生成

利用canvas画一个存储按钮（附加svg动态按钮）

实例：

<html>
    <head>
        <meta http-equiv="content-type" content="text/html charset="utf-8" />
        <script type="text/javascript" src="../js/jquery-1.12.1.js"></script>
        <script type="text/javascript" src="http://cdn.gbtags.com/snap.svg/0.3.0/snap.svg-min.js"></script>
        <style type="text/css">
            /*CSS源代码*/
            .button-wrap {
                margin: 65px 0 0 111px;
            }
            .button {
                background: none;
                border: none;
                width: 150px;
                height: 55px;
                outline: none;
                position: relative;
                padding: 0;
                -webkit-tap-highlight-color: rgba(0,0,0,0);
                -webkit-tap-highlight-color: transparent; /* For some Androids */
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .button__text {
                display: block;