77 lines
1.4 KiB
Markdown
77 lines
1.4 KiB
Markdown
---
|
|
nav:
|
|
title: 前端
|
|
path: /fea
|
|
group:
|
|
title: 💊 canvas
|
|
order: 4
|
|
path: /canvas
|
|
---
|
|
|
|
## 文字
|
|
|
|
```jsx
|
|
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>
|
|
);
|
|
};
|
|
```
|
|
|
|
```ts
|
|
window.onload = function () {
|
|
demo1();
|
|
demo2();
|
|
demo3();
|
|
};
|
|
```
|