Javascript 我怎样才能做一个画线的按钮

我想创建一个按钮，在HTML中画一条线（带画布）。我已经尝试了一些CSS（display:none），但没有成功。我该怎么做呢？

我就是这样做的-

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>

JS

#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;
}

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

---

查找

的事件侦听器单击
并了解如何在HTML5画布上画一条线。我不明白你为什么要在这个问题上使用CSS。而且你也没有表现出任何努力。。。你有任何代码吗？用户没有要求用画布做这个吗？我有一个小问题：按钮出现了，但它什么也没做。你能重复一下JS代码吗？重复一下@IanDavidBocioacaSorry，代码的问题出在我身上。。不管怎样，你的代码对我帮助很大。非常感谢。