当用户单击Ctrl时，我想在观看的画布中间画一个圆圈。

Question

我有以下html：

<div id="outliner">


<div id="main_track" style="width:901px;margin: auto;overflow-x: scroll;overflow-y: hidden;position: relative;  height: 150px; " >
                <canvas style="height:50px;width:1901px;" id='timeLine'></canvas>
            
            </div> 
      </div>

在main_track元素的中间有一条垂直的红线，它是由样式#outliner:after制作的。现在，当用户单击Ctrl时，我想在这一行画一个小圆圈，所以我做了以下javascript：

var stillDown=false;
window.onkeydown=function(event){
    if (event.keyCode==17 && !stillDown){
        console.log("key DOWN!");
            stillDown=true;
                var context = document.getElementById('timeLine').getContext('2d');
                const place=document.getElementById("main_track").scrollLeft;
                context.beginPath();
                context.arc(place+450, 25, 3, 0, 2 * Math.PI, false);
                context.strokeStyle = '#000000';
                context.fillStyle = '#ff0000';
                context.lineWidth = 2;
                context.fill();
                context.stroke();
                
        }
    
}
window.onkeyup=function(event){
    
    if (event.keyCode==17 && stillDown){
        

            console.log("key UP!");
            stillDown=false;                
        }

当我点击Ctrl进行测试时，我会看到“按下键！”还有“钥匙！”在控制台中，但没有显示绘图。我在控制台中没有看到错误。我该怎么解决呢？这是jsfiddle的代码。

Answer 1

您应该将画布大小设置为画布html宽度和高度标记属性，如下所示：

<canvas width="1901" height="50" id='timeLine'></canvas>

宽度/高度的样式属性在<canvas>中有不同的含义

工作JsFiddle

您可以在这里阅读更多不同含义的信息：Stackoverflow回答