canvas - 绘制响应对角线

Question

这就是我想要的：一个页面分成两个垂直部分：一个带有内容的红色部分（小提琴中为 200px）+ 右侧部分是一条从左上角 (200, 0) 到浏览器窗口右下角的对角线.

我希望这条线能够响应任何页面变化：每次调整页面大小时，这条线总是这些点之间的整齐对角线。(200, 0 - 浏览器窗口的右下角)

我一直在尝试管理画布功能，但可能是错误的方式。有谁能够帮我？

[http://jsfiddle.net/ropvw3jm/3/][1]

Answer 1

这可以解决问题，请查看评论以获取信息：

// Get the canvas and the context to draw in
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

function diagonalLineToBottomRight(){
  // Reset your canvas to the size of the window - this also clears the canvas
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // Set a line color
  context.strokeStyle = 'red';
  // Set the point where you line starts
  context.moveTo(200, 0);
  // Draw the line to the bottom corner
  context.lineTo(window.innerWidth, window.innerHeight);
  // Actually draw the pixels to the canvas
  context.stroke();
}

// Set the function to execute when the window size changes
window.addEventListener('resize', diagonalLineToBottomRight, false);
// Execute the function on initial load
diagonalLineToBottomRight();

<canvas id="canvas"></canvas>

但是，我猜您不希望画布与侧面的内容重叠。这可以通过结合一些 CSS 和 JS 来制作一个比您的页面宽200 像素的画布来完成：

// Get the canvas and the context to draw in
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

function diagonalLineToBottomRight(){
  // Reset your canvas to the size of the window - this also clears the canvas
  canvas.width = window.innerWidth - 200;
  canvas.height = window.innerHeight;
  // dont draw when its not wide enough
  if(window.innerWidth - 200 < 200) return;
  // Set a line color
  context.strokeStyle = 'red';
  // Set the point where you line starts
  context.moveTo(0, 0);
  // Draw the line to the bottom corner
  context.lineTo(window.innerWidth - 200, window.innerHeight);
  // Actually draw the pixels to the canvas
  context.stroke();
}

// Set the function to execute when the window size changes
window.addEventListener('resize', diagonalLineToBottomRight, false);
// Execute the function on initial load
diagonalLineToBottomRight();

html, body {
  height: 100%;
}
nav {
  position: absolute;
  left: 0;
  top: 0;
  background: red;
  width: 200px;
  height: 100%;
}
canvas {
  position: fixed;
  top: 0;
  right: 0;
}

<canvas id="canvas"></canvas>
<nav></nav>