Question

在下面我非常简单的代码示例中，我试图绘制一个框，距离画布外侧的边距10像素。尽管从浏览器窗口的屏幕扩展看起来似乎合法的值，我只是得到一个L形线，这看起来很奇怪。我的代码似乎很直接。所以有2个问题：

为什么它如此之小（例如，没有穿过整个浏览器窗口？
为什么它不像代码所暗示的那样？

<html>
<head></head>
<body>
<p id="X">X:</p>
<p id="Y">Y:</p>
<!--<form>
Timeline Item: <input type="text" name="item"><br>
Timeline Date: <input type="date" name="date"><br>
</form>-->
<canvas id="DemoCanvas" width=100% height=100%></canvas>  

<script>  

var canvas = document.getElementById('DemoCanvas');
var xoutput = document.getElementById('X');
var youtput = document.getElementById('Y');


// Always check for properties and methods, to make sure your code doesn't break in other browsers.
if (canvas.getContext) 
 {
 	var margin = 10;

 	var startx = margin;
 	var starty = margin;

 	var endx = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) - margin;
	var endy = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - margin;

	xoutput.innerHTML = endx;
	youtput.innerHTML = endy-margin;

 	var context = canvas.getContext('2d');

  	context.beginPath(); 

  	context.moveTo(startx,starty);
  	context.lineTo(endx,starty);
	context.lineTo(endx,endy);
 	context.lineTo(startx,endy);
  	context.lineTo(startx,starty);
  
 	context.stroke();
 }
</script>  

</body>
</html>

这是你可以清楚看到的结果太小而不是一个盒子的结果：

Answer 1

因为您正在使用窗口/文档宽度＆amp;高度，例如整个网页，所以线条超出了画布。

你应该使用canvas元素的宽度和宽度。高度。

＆＃13;

componentDidMount() {
  this.props.actions.fetchPost(this.props.id)
}

＆＃13;

var canvas = document.getElementById('DemoCanvas');
var xoutput = document.getElementById('X');
var youtput = document.getElementById('Y');


// Always check for properties and methods, to make sure your code doesn't break in other browsers.
if (canvas.getContext) 
 {
 	var margin = 10;

 	var startx = margin;
 	var starty = margin;

 	var endx = canvas.clientWidth - margin;
	var endy = canvas.clientHeight - margin;

	xoutput.innerHTML = endx;
	youtput.innerHTML = endy-margin;

 	var context = canvas.getContext('2d');

  	context.beginPath(); 

  	context.moveTo(startx,starty);
  	context.lineTo(endx,starty);
	context.lineTo(endx,endy);
 	context.lineTo(startx,endy);
  	context.lineTo(startx,starty);
  
 	context.stroke();
 }

＆＃13;

要实现＆＃34;全屏＆＃34;，您可以做的是使用父元素或正文标记，然后＆＃34;复制＆＃34;它的宽度和宽度之后到画布的高度。请注意，我使用vh＆amp; vw而不是％以避免任何拉伸问题等。

＆＃13;

<p id="X">X:</p>
<p id="Y">Y:</p>
<!--<form>
Timeline Item: <input type="text" name="item"><br>
Timeline Date: <input type="date" name="date"><br>
</form>-->
<canvas id="DemoCanvas" width=100 height=100></canvas>

＆＃13;

var canvas = document.getElementById('DemoCanvas');
var xoutput = document.getElementById('X');
var youtput = document.getElementById('Y');

updateCanvasSize();

function updateCanvasSize(){
  canvas.width = bodySim.clientWidth;
  canvas.height = bodySim.clientHeight;
  
  draw();
  }
 
function draw(){
 if (canvas.getContext) 
 {
 	var margin = 10;

 	var startx = margin;
 	var starty = margin;

 	var endx = canvas.clientWidth - margin;
	var endy = canvas.clientHeight - margin;

	xoutput.innerHTML = endx;
	youtput.innerHTML = endy-margin;

 	var context = canvas.getContext('2d');

  	context.beginPath(); 

  	context.moveTo(startx,starty);
  	context.lineTo(endx,starty);
	context.lineTo(endx,endy);
 	context.lineTo(startx,endy);
  	context.lineTo(startx,starty);
  
 	context.stroke();
 }
} //end of draw

＆＃13;

#bodySim {
  width: 100vw;
  height: 100vh;
}

＆＃13;

Answer 2

你的问题源于对画布的常见误解。 height和width属性。您将值作为百分比给出，但这不起作用。来自MDN：

HTMLCanvasElement.height是一个反映高度的正整数以CSS像素解释的元素的HTML属性。什么时候未指定该属性，或者如果将其设置为无效值，如负数，则使用默认值150.

所以你应该使用普通整数。如果您需要动态大小，可以使用javascript更新值。

＆＃13;

<html>
<head></head>
<body>
<p id="X">X:</p>
<p id="Y">Y:</p>
<!--<form>
Timeline Item: <input type="text" name="item"><br>
Timeline Date: <input type="date" name="date"><br>
</form>-->
<canvas id="DemoCanvas" width="628" height="200"></canvas>  

<script>  

var canvas = document.getElementById('DemoCanvas');
var xoutput = document.getElementById('X');
var youtput = document.getElementById('Y');


// Always check for properties and methods, to make sure your code doesn't break in other browsers.
if (canvas.getContext) 
 {
 	var margin = 10;

 	var startx = margin;
 	var starty = margin;

 	var endx = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) - margin;
	var endy = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - margin;

	xoutput.innerHTML = endx;
	youtput.innerHTML = endy-margin;

 	var context = canvas.getContext('2d');

  	context.beginPath(); 

  	context.moveTo(startx,starty);
  	context.lineTo(endx,starty);
	context.lineTo(endx,endy);
 	context.lineTo(startx,endy);
  	context.lineTo(startx,starty);
  
 	context.stroke();
 }
</script>  

</body>
</html>

＆＃13;

为什么我的画布线如此小而且迷失方向？

2 个答案: