React+TypeScriptでcanvasを用いて矩形描画する
React+TypeScriptでCanvasを用いて矩形描画をする関数コンポーネントです。
import React, { useEffect, useRef, memo, FC } from 'react';
type Props = {
canvasWidth: number; //canvas幅
canvasHeight: number; //canvas高さ
x: number; //矩形始点x
y: number; //矩形始点y
rectWidth: number; //矩形幅
rectHeight: number; //矩形高さ
};
const Canvas: FC<Props> = ({
canvasWidth,
canvasHeight,
x,
y,
rectWidth,
rectHeight
}) => {
const canvasRef = useRef(null);
const getContext = (): CanvasRenderingContext2D => {
const canvas: any = canvasRef.current;
return canvas.getContext('2d');
};
useEffect(() => {
const ctx = getContext();
ctx.strokeStyle = '#000000'; // 矩形色
ctx.lineWidth = 2; // 矩形線幅
ctx.strokeRect(x, y, rectWidth, rectHeight); // 矩形描画
}, [canvasWidth, canvasHeight, x, y, rectWidth, rectHeight]);
return <canvas ref={canvasRef} width={canvasWidth} height={canvasHeight} />;
};
export default memo(Canvas);
Author And Source
この問題について(React+TypeScriptでcanvasを用いて矩形描画する), 我々は、より多くの情報をここで見つけました https://qiita.com/h-kagata/items/8639e7c330c3e84db2f9著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .