javascript - 我怎样才能制作一个画线的按钮

Question

我想创建一个在 HTML 中绘制一条线（带画布）的按钮。我已经尝试过使用 CSS （使用 display:none ），但它没有用。我怎样才能做到？

Answer 1

我就是这样做的——

https://jsfiddle.net/jadeallencook/wnhmgya7/

HTML

<center>
    <div id="myLine"></div>
    <br />
    <button id="myButton">
        Draw Line
    </button>
</center>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

CSS

#myLine {
    height: 1px;
    width: 0px;
    background: black;
    margin-top: 25px;
}

.animate {
    -webkit-animation: myfirst 5s;
    animation: myfirst 5s;
}

@keyframes myfirst {
    0% {width: 0px;}
    100% {width: 500px;}
  }
@-webkit-keyframes myfirst {
    0% {width: 0px;}
    100% {width: 500px;}
  }

#myButton {
    display: block;
    border: 0px;
    border-radius: 5px;
    width: 200px;
    height: 50px;
    background: #000;
    color: #FFF;
}

JS

$(function(){
    $('#myButton').click(function(){
        e1 = $('#myLine');
        e1.addClass('animate');
        e1.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
        function (e) {
            e1.removeClass('animate');
        });
    });
});