Question

function Start() {
    	DrawViewDist();
    	DrawFoV();
    }
    
    function DrawFoV() {
    	var c = document.getElementById("roomCanvas1");
    	var ctx = c.getContext("2d");
    	ctx.strokeStyle = "#f0f";
    	ctx.lineWidth=1;
    	ctx.beginPath();
    	ctx.moveTo(150, 113);
    	ctx.lineTo(123,16);
    	ctx.stroke();
    	ctx.beginPath();
    	ctx.moveTo(150, 113);
    	ctx.lineTo(175,16);
    	ctx.stroke();
    }
    
    function DrawViewDist() {
    	var c = document.getElementById("roomCanvas1");
    	var ctx = c.getContext("2d");
    	ctx.strokeStyle = "#ff0";
    	ctx.lineWidth=1;
    	ctx.beginPath();
    	ctx.moveTo(150, 113);
    	ctx.lineTo(150,16);
    	ctx.stroke();
    	ctx.beginPath();
    	ctx.moveTo(1, 1);
    	ctx.lineTo(299,149);
    	ctx.stroke();
    }

body {
  background-color: #802828;
  color: #fff;
}

#roomCanvas1 {
  height: 600px;
  width: 800px;
  padding: 0;
  border: 1px solid #0f0;
}

<!DOCTYPE html>
<html>

  <head>
    <title>Canvas Test</title>
  </head>

  <body onload="Start()">
    <div id="main">
      <canvas id="roomCanvas1">Your browser does not support HTML5 canvas drawings.</canvas>
    </div>
  </body>

</html>

我正在尝试使用画布绘制线条。画布设置为800x600，我周围有一个1 px的边框，所以我可以看到它确实是800x600-但是当我尝试绘制线条时，我必须假装画布为300x150才能使线条开始/在正确的位置结束。最重要的是，线条比应有的要粗得多-并且模糊！我从code from W3Schools开始并进行了修改。在TryIt编辑器中，一切正常（使用相同的浏览器），因此我无法想象问题出在哪里。

Answer 1

这是我过去遇到的一个常见问题。只需设置canvas.width = 800和canvas.height = 600。画布的高度和宽度自然是150和300。在html / css中更改画布的高度和宽度时，它不会更改js。您必须在js中指定发生了更改。希望这会有所帮助

HTML画布-bizzarre结果

1 个答案: