Canvas是HTML5提供的一种绘图API,它可以通过JavaScript在网页上绘制图形、图像和动画。
Canvas提供了一个类似画布的区域,可以在其中动态绘制图形。
API
CanvasRenderingContext2D.arc()
绘制圆弧路径的方法
void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
参数
x:圆弧中心的x坐标
y:圆弧中心的y坐标
radius:圆弧的半径
startAngle:圆弧的起始点,单位弧度
endAngle:圆弧的终点,单位弧度
anticlockwise:true为逆时针,false为顺时针
示例
1 2 3 4 5
| const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.stroke();
|
CanvasRenderingContext2D.createLinearGradient()
创建线性的渐变对象,渐变可用于填充矩形、圆形、线条、文本等。
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
参数
x0: 渐变开始点的 x 坐标
y0:渐变开始点的 y 坐标
x1:渐变结束点的 x 坐标
y1:渐变结束点的 y 坐标
返回值
CanvasGradient,据指定线路初始化的线性 CanvasGradient
对象。
CanvasRenderingContext2D.createRadialGradient()
创建放射性渐变对象。
CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
参数
x0:开始圆形的 x 轴坐标。
y0:开始圆形的 y 轴坐标。
r0:开始圆形的半径。
x1:结束圆形的 x 轴坐标。
y1:结束圆形的 y 轴坐标。
r1:结束圆形的半径
CanvasGradient
描述渐变的不透明对象,通过CanvasRenderingContext2D.createLinearGradient()
或CanvasRenderingContext2D.createRadialGradient()
的返回值得到。
方法
CanvasGradient.addColorStop(offset,color)
指定到偏移的渐变色。
参数
offset:0
到1
之间的值,超出范围将抛出INDEX_SIZE_ERR
错误
color:CSS 颜色值,若颜色值不能被解析为有效的 CSS 颜色值,将抛出SYNTAX_ERR
错误。
Canvas创建渐变色星空背景
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116
| import { useRef, useEffect } from "react";
const CanvasStar = () => { const canvasRef = useRef<HTMLCanvasElement | null>(null); const starsRef = useRef<{ x: number; y: number; alpha: number }[]>([]);
useEffect(() => { const canvas = canvasRef.current; if (!canvas) return;
const context = canvas.getContext("2d"); if (!context) return; const drawBackground = () => { const gradient = context.createLinearGradient( canvas.width / 2, 0, canvas.width / 2, canvas.height ); gradient.addColorStop(0.1, "#1b2947"); gradient.addColorStop(0.6, "#75517d"); gradient.addColorStop(1, "#e96f92"); context.fillStyle = gradient; context.fillRect(0, 0, canvas.width, canvas.height); }; const drawShootingStar = (x: number, y: number, alpha: number): void => { let gradient = context.createRadialGradient(x, y, 0, x, y, 10); gradient.addColorStop(0, "#fff"); gradient.addColorStop(0.3, "transparent"); context.fillStyle = gradient; context.globalAlpha = alpha; context.beginPath(); context.arc(x, y, 10, 0, Math.PI * 2); context.fill(); };
const generateRandomStars = ( num: number ): { x: number; y: number; alpha: number; }[] => { const stars = [];
for (let i = 0; i < num; i++) { const x = Math.random() * canvas.width; const y = Math.random() * canvas.height * 0.6; const alpha = Math.random(); stars.push({ x, y, alpha }); }
return stars; }; const updateCanvasSize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; starsRef.current = generateRandomStars(Math.max(canvas.width / 10, 20)); }; const animateStars = (): void => { context.clearRect(0, 0, canvas.width, canvas.height); context.globalAlpha = 1; drawBackground();
starsRef.current.forEach((star) => { drawShootingStar(star.x, star.y, star.alpha); if (Math.random() < 0.1 && star.alpha < 0.9) { star.alpha += 0.1; } else if (Math.random() > 0.9 && star.alpha > 0.1) { star.alpha -= 0.1; } }); requestAnimationFrame(animateStars); }; updateCanvasSize(); window.addEventListener("resize", updateCanvasSize);
animateStars();
return () => { window.removeEventListener("resize", updateCanvasSize); }; }, []); return ( <canvas ref={canvasRef} width={window.innerWidth} height={window.innerHeight} // 背景沉底 style={{ position: "absolute", zIndex: -2 }} /> ); };
export default CanvasStar;
|
渐变星空背景的效果图如下:
