1 回答

TA貢獻1828條經驗 獲得超3個贊
您需要處理渲染內部的過渡,使用requestAnimationFrame它是平滑的,包括下面的示例。
const { useRef, useEffect } = React;
const aImage = new Image();
const aSrc = "https://www.techjunkie.com/wp-content/uploads/2017/09/letter_a_small.png"
let x = 20;
let y = 20;
const draw = (ref) => {
aImage.addEventListener('load', () => {
render(ref);
})
aImage.src = aSrc;
}
function render(ref) {
requestAnimationFrame(_ => render(ref));
const canvas = ref.current;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// Any fancy transition here
x++;
//
ctx.drawImage(aImage, x, y);
}
function App() {
const canvasRef = useRef(null);
useEffect(_ => draw(canvasRef));
return (
<canvas ref={canvasRef} height={600} width={1200} />
)
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
添加回答
舉報