javascript - 移动网站上的屏幕旋转后，html 画布无法正确调整大小

Question

我正在使用 gatsby 开发我的项目的第一次使用 html 画布

我的问题是我的 html 画布在旋转时被剪切 我似乎对宽度和高度有问题，但我似乎无法理解问题所在

这是问题的一些图片：

无旋转

第一次旋转后

第二次旋转后

这是我处理画布的代码部分

感谢您的帮助我只是一个初学者，所以如果我的代码不是很干净，我很抱歉

function MainScratch ()  {
let canvas = useRef(null)
function getSize() {
    const isBrowser = typeof window !== 'undefined'

    if (isBrowser) return {
        width: window.innerWidth,
        height: window.innerHeight,
    }
    else return {
        width: 5,
        height: 5,
    }
}

const [windowSize, setWindowSize] = useState(getSize)

useEffect (() => {

    function handleResize() {
        setWindowSize(getSize())
    }

    window.addEventListener("resize", handleResize)

    return () => window.removeEventListener("resize", handleResize)

},[]);

useEffect(() => {
    let renderingElement = canvas.current
    let drawingElement = renderingElement.cloneNode()

    let drawingCtx = drawingElement.getContext('2d')
    let renderingCtx = renderingElement.getContext('2d')


    let lastX
    let lastY

    let moving = false

    renderingCtx.globalCompositeOperation = "source-over"       
    renderingCtx.fillStyle = '#000000'
    renderingCtx.fillRect(0, 0, windowSize.width, windowSize.height)

    function reload()
    {
        renderingCtx.clearRect(0, 0, drawingElement.width, drawingElement.height);
        drawingCtx.clearRect(0, 0, renderingElement.width, renderingElement.height);
        renderingCtx.fillRect(0, 0, windowSize.width, windowSize.height)
        
    }

    window.addEventListener("resize", reload)
    window.addEventListener("orientationchange", reload)

    renderingElement.addEventListener('touchstart', e => {
        moving = true
        lastX = e.touches[0].pageX - renderingElement.offsetLeft
        lastY = e.touches[0].pageY - renderingElement.offsetTop
        e.preventDefault();
    })

    renderingElement.addEventListener('touchend', e => {
        moving = false
        lastX = e.lastX - renderingElement.offsetLeft
        lastY = e.lastY - renderingElement.offsetTop
    })

    renderingElement.addEventListener('touchmove', e => {
        moving = true
        if (moving) {
            drawingCtx.globalCompositeOperation = "source-over"
            renderingCtx.globalCompositeOperation = "destination-out"
            let currentX = e.touches[0].pageX - renderingElement.offsetLeft
            let currentY = e.touches[0].pageY - renderingElement.offsetTop
            drawingCtx.beginPath();
            drawingCtx.lineJoin = "round"
            drawingCtx.moveTo(lastX, lastY)
            drawingCtx.lineTo(currentX, currentY)
            drawingCtx.closePath()
            drawingCtx.lineWidth = 80;
            drawingCtx.stroke()
            lastX = currentX
            lastY = currentY
            renderingCtx.drawImage(drawingElement, 0, 0)
        }
        e.preventDefault();
    })
}, []);

return (
    <Banner>
        <Canvas
            id="canvas"
            height={windowSize.height}
            width={windowSize.width}
            ref={canvas}
        />
    </Banner>
)

标签： javascriptrotationhtml5-canvasscreen