Question

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

我希望此行能够响应任何页面更改：每次调整页面大小时，此行始终是这些点之间的整齐对角线。（200,0 - 浏览器窗口的右下角）

我一直试图管理画布功能，但可能是错误的方式。有人能帮助我吗？

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

Answer 1

这将解决问题，检查信息的评论：

＆＃13;

// 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();

＆＃13;

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

＆＃13;

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

＆＃13;

// 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();

＆＃13;

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

＆＃13;

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

＆＃13;

绘制响应对角线

1 个答案: