javascript - 線を引くボタンの作り方

Question

HTMLで(キャンバスで)線を引くボタンを作りたいです。私はすでに CSS ( with 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');
        });
    });
});