画布仅在左上象限中绘图

问题描述

试图为一个简单的浏览器游戏创建空间背景，我们遇到了麻烦，因为仅画布在左上象限进行绘画。

这是一个使用Emotion作为JS中CSS的React应用。我们正在尝试通过其width和height属性设置画布尺寸，以便以此为基础进行绘画。然后，我们要使用通过情感注入的CSS来调整画布的大小以适合其容器宽度，同时保持宽高比。

可以在https://codesandbox.io/s/epic-liskov-degs9上找到代码沙箱

有问题的组件如下：

/** @jsx jsx */
import { css,jsx } from "@emotion/core";
import { useEffect } from "react";
import { useRef } from "react";

// Inspired by: https://codepen.io/dudleystorey/pen/QjaXKJ
const Starfield = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  const drawStars = () => {
    function getRandom(min: number,max: number) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    const canvas = canvasRef.current as HTMLCanvasElement;
    if (!canvas) return;
    const context = canvas.getContext("2d");
    if (!context) return;
    const stars = 600;
    const colorrange = [0,60,240];
    const maxWidth = canvas.offsetWidth;
    const maxHeight = canvas.offsetHeight;
    for (var i = 0; i < stars; i++) {
      const x = Math.random() * maxWidth;
      const y = Math.random() * maxHeight;

      /**
       * x and y are what we expect but stars only show up
       * in the top left corner ?
       */
      console.log(x,y);
      const radius = Math.random() * 1.2;
      const hue = colorrange[getRandom(0,colorrange.length - 1)];
      const sat = getRandom(50,100);
      context.beginPath();
      context.arc(x,y,radius,360);
      context.fillStyle = "hsl(" + hue + "," + sat + "%,88%)";
      context.fill();
    }
  };
  useEffect(() => {
    drawStars();
  },[]);

  return (
    <canvas
      width="1500"
      height="1000"
      css={css`
        background: #111;
        width: 100%;
        height: auto;
      `}
      ref={canvasRef}
    ></canvas>
  );
};

export default Starfield;

解决方法

您正在访问canvas元素的offsetHeight和width，这是画布占用的空间而不是画布的大小。您应该基于随机计算的是画布的宽度和高度。将maxWidth和height更改为以下值将使数字基于画布尺寸而不是DOM中canvas元素的尺寸。

SQL

emotion html5-canvas reactjs reactjs