如何解决画布仅在左上象限中绘图
试图为一个简单的浏览器游戏创建空间背景,我们遇到了麻烦,因为仅画布在左上象限进行绘画。
这是一个使用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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。