nicenote/docs/fea/canvas/font.md

nav	group
title path 前端 /fea	title order path 💊 canvas 4 /canvas

文字

import React, { useRef, useEffect } from 'react';

export default () => {
  const canvasRef = useRef();
  const canvasRef2 = useRef();
  const canvasRef3 = useRef();

  // 填充文本
  function demo1() {
    // 声明DOM
    let canvas = canvasRef.current;
    let ctx = canvas.getContext('2d');

    ctx.shadowOffsetY = 8;
    ctx.shadowOffsetX = 8;
    ctx.shadowBlur = 3;
    ctx.shadowColor = '#ccc';

    ctx.font = '40px serif';
    ctx.fillText('1. 你是个智障!', 50, 50);
  }

  function demo2() {
    let canvas = canvasRef2.current;
    let ctx = canvas.getContext('2d');

    ctx.font = '48px serif';
    ctx.strokeText('2. hello world', 10, 50);
  }

  function demo3() {
    let canvas = canvasRef3.current;
    let ctx = canvas.getContext('2d');

    ctx.font = '40px serif';
    ctx.textBaseline = 'top';
    ctx.textAlign = 'start';
    ctx.strokeText('hello world', 0, 100);
  }

  useEffect(() => {
    demo1();
    demo2();
    demo3();
  }, []);

  return (
    <div>
      <canvas ref={canvasRef} width="500" height="200" />
      <canvas ref={canvasRef2} width="500" height="200" />
      <canvas ref={canvasRef3} width="500" height="200" />
    </div>
  );
};

window.onload = function () {
  demo1();
  demo2();
  demo3();
};