77 lines
1.5 KiB
Markdown
77 lines
1.5 KiB
Markdown
---
|
|
nav:
|
|
title: 前端
|
|
path: /fea
|
|
group:
|
|
title: 💊 canvas
|
|
order: 4
|
|
---
|
|
|
|
## 文字
|
|
|
|
```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()
|
|
}
|
|
|
|
|
|
``` |