Sätt upp en HTML Canvas
Jag höll ett föredrag om Canvas en gång och då skapade jag den här sidan.
import { useRef, useEffect } from "react";
const SettingUpACanvas = () => {
const canvas = useRef<HTMLCanvasElement>(null);
useEffect(() => {
if (canvas.current === null) return;
const context = canvas.current.getContext("2d");
if (context === null) return;
context.fillStyle = "hsl(0, 0%, 95%)";
context.fillRect(0, 0, 640, 480);
context.strokeStyle = "black";
context.beginPath();
context.arc(640 / 2, 480 / 2, 640 / 4, 0, Math.PI * 2);
context.stroke();
}, [canvas.current]);
return (
<canvas
ref={canvas}
style={{
border: "1px solid black",
objectFit: "contain",
width: "100%",
height: "100%",
}}
width={640}
height={480}
/>
);
};
Responsive HTML Canvas
import { useRef, useEffect, useState } from "react";
const Canvas = (props: Canvas) => {
const canvasRef = useRef<HTMLCanvasElement>(null);
const [context, setContext] = useState<CanvasRenderingContext2D | null>(null);
const { width = 1000, height = 1000, draw, className } = props;
useEffect(() => {
if (canvasRef.current) {
const contextNew = canvasRef.current.getContext("2d");
if (contextNew) {
setContext(contextNew);
}
}
if (!context) return;
draw(context, width, height);
}, [context]);
return (
<canvas
className={className}
ref={canvasRef}
style={{
border: "1px solid black",
objectFit: "contain",
width: "100%",
height: "100%",
}}
width={width}
height={height}
/>
);
};
const drawResponsive = (context, width, height) => {
context.fillStyle = '#EAEAFF'
context.fillRect(0, 0, width, height)
context.fillStyle = '#FF0000'
context.fillRect(0, 0, 10, 10)
context.fillRect(width - 10, height - 10, 10, 10)
context.strokeStyle = 'black'
context.beginPath()
context.fillStyle = '#FFFFFF'
context.arc(
width / 2,
height / 2,
width / 4,
0,
Math.PI * 2,
)
context.fill()
context.fillStyle = '#000'
context.stroke()
context.closePath()
}
<Canvas draw={drawResponsive} />
Drawing HTML Canvas
Testa att rita på rutan nedan.
import { useRef, useEffect } from "react";
const DrawCanvas = () => {
const canvas = useRef<HTMLCanvasElement>(null);
const width = 1000;
const height = 1000;
let drawing = false;
useEffect(() => {
if (canvas.current === null) return;
const context: CanvasRenderingContext2D | null =
canvas.current.getContext("2d");
if (!context) return;
const getXY = (event: MouseEvent) => {
if (canvas.current === null)
return {
x: 0,
y: 0,
};
const x = event.x - canvas.current.getClientRects()[0].left;
const y = event.y - canvas.current.getClientRects()[0].top;
return {
x: (x / canvas.current.clientWidth) * width,
y: y * (height / canvas.current.clientHeight),
};
};
canvas.current.addEventListener(
"mousedown",
(mousedownEvent) => {
context.strokeStyle = "black";
context.lineWidth = 1;
const coords = getXY(mousedownEvent);
context.moveTo(coords.x, coords.y);
drawing = true;
},
false
);
canvas.current.addEventListener(
"mousemove",
(mousemoveEvent) => {
if (drawing) {
const coords = getXY(mousemoveEvent);
context.lineTo(coords.x, coords.y);
context.stroke();
}
},
false
);
canvas.current.addEventListener(
"mouseup",
() => {
if (drawing) {
drawing = false;
context.stroke();
}
},
false
);
canvas.current.addEventListener(
"mouseout",
() => {
if (drawing) {
drawing = false;
}
},
false
);
}, []);
return (
<canvas
ref={canvas}
style={{
border: "1px solid black",
objectFit: "contain",
width: "100%",
height: "100%",
backgroundColor: "white",
}}
width={width}
height={height}
/>
);
};
Prova att skriva ditt namn
I mallen gå till stället där det står var ctx och använd den variablen till att rita med. Till exempel så här:
ctx.fillStyle = "#FF0000";
ctx.fillRect(30, 10, 50, 70);