javascript - 如何将画布更改为水平而不滚动？

Question

我试图弄清楚如何将画布变成水平显示。

像这样显示：

我尝试使用旋转，但问题是它让我滚动到我的页面。

canvas { transform: rotate(270deg) }

我应该做的任何其他解决方案的想法？

setTimeout(() => {
  const canvas = document.querySelector("canvas");
  const context = canvas.getContext("2d");
  canvas.height = window.innerHeight;

  //  Calculate filling the space
  const baseWidth = 30;
  const remainingWidth = window.innerWidth % baseWidth;
  const totalItems = Math.floor(window.innerWidth / baseWidth);
  const fullWidth = Math.floor(baseWidth + remainingWidth / totalItems);

  canvas.width = totalItems * fullWidth;

  // For the amount of goop lines we want, alternate between even and odd ones, moving either up or down
  for (var i = 0; i < totalItems; i++) {
    context.beginPath();
    const odd = i % 2 === 0 ? 1 : -1;

    const newHeight =
      window.innerHeight / 2 + (odd * Math.random() * 45 + odd + 10);

    context.fillStyle = "#000";
    
    // Draw the vertical rectangles that make up the dripping lines
    context.fillRect(i * fullWidth, 0, fullWidth, newHeight);

    // Draw the circles at the end of each dripping line (drawing white circles on every second one)
    if (odd === -1) {
      context.fillStyle = "#ffffff";
    }
    context.arc(
      i * fullWidth + fullWidth / 2,
      newHeight,
      fullWidth / 2,
      0,
      2 * Math.PI
    );
    context.fill();
  }
}, 0);

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%;
}

<canvas></canvas> 

标签： javascripthtmlcss

Answer 1

您可以根据水平/垂直方向重新绘制它而不是旋转吗？

我在下面创建了两个绑定函数，以根据方向返回 x、y、宽度、高度和半径值。

每 2 秒，它将以交替方向呈现。

编辑：我清理了代码以自我记录所有变量，甚至应用了整体背景填充。

const Orientation = {
    HORIZONTAL : 'horizontal',
    VERTICAL   : 'vertical'
  },
  ctx = document.querySelector('canvas').getContext('2d');

const main = () => {
  const state = { orientation: null },
    opts = {
      baseWidth: 30,
      colors: [ '#222', '#0F7' ] /* [ even, odd ] */
    };
  drawGraph(state, opts);
  setInterval(() => drawGraph(state, opts), 2000);
};

const drawGraph = (state, opts) => {
  flipOrientation(state);
  const remainingWidth = window.innerWidth % opts.baseWidth,
    totalItems = Math.floor(window.innerWidth / opts.baseWidth),
    fullWidth = Math.floor(opts.baseWidth + remainingWidth / totalItems);
  ctx.canvas.height = window.innerHeight;
  ctx.canvas.width = totalItems * fullWidth;
  ctx.fillStyle = opts.colors[1];
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  const length = state.orientation === Orientation.HORIZONTAL
      ? window.innerHeight : window.innerWidth,
    majorOff = opts.baseWidth * 1.5,
    minorOff = opts.baseWidth * 0.33;
  for (let i = 0; i < totalItems; i++) {
    const isEven = i % 2 === 0,
      alignment = isEven ? -1 : 1,
      randomOffset = alignment * Math.random() * majorOff + minorOff,
      newHeight = length / 2 + randomOffset,
      rb = getRectBounds(state.orientation, i, fullWidth, newHeight),
      ab = getArcBounds(state.orientation, i, fullWidth, newHeight);
    ctx.beginPath();
    ctx.fillStyle = opts.colors[0];
    ctx.fillRect(rb.x, rb.y, rb.width, rb.height);
    if (isEven) ctx.fillStyle = opts.colors[1];
    ctx.arc(ab.x, ab.y, ab.radius, 0, 2 * Math.PI);
    ctx.fill();
  }
};

const flipOrientation = (state) =>
  state.orientation = state.orientation === Orientation.HORIZONTAL
    ? Orientation.VERTICAL : Orientation.HORIZONTAL;

const getRectBounds = (orientation, index, rectWidth, rectHeight) =>
  (({ x, y, width, height }) =>
    orientation === Orientation.VERTICAL
      ? ({ x: y, y: x, width: height, height: width })
      : ({ x, y, width, height}))
  ({
    x      : index * rectWidth,
    y      : 0,
    width  : rectWidth,
    height : rectHeight
  });

const getArcBounds = (orientation, index, width, height) =>
  (({ x, y, radius }) =>
    orientation === Orientation.VERTICAL
      ? ({ x: y, y: x, radius })
      : ({ x, y, radius }))
  ({
    x      : index * width + width / 2,
    y      : height,
    radius : width / 2
  });

main();

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%;
}

<canvas></canvas>