颜色
import React, { useRef, useEffect } from 'react';
export default () => {
const canvasRef = useRef()
const canvasRef2 = useRef()
const canvasRef3 = useRef()
const canvasRef4 = useRef()
const canvasRef5 = useRef()
const canvasRef6 = useRef()
const canvasRef7 = useRef()
const canvasRef8 = useRef()
const canvasRef9 = useRef()
const canvasRef10 = useRef()
const canvasRef11 = useRef()
const canvasRef12 = useRef()
function demo1() {
let canvas = canvasRef.current
let ctx = canvas.getContext('2d')
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) {
ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`
ctx.fillRect(j * 25, i * 25, 25, 25)
}
}
}
function demo2() {
let canvas = canvasRef2.current
let ctx = canvas.getContext('2d')
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) {
ctx.strokeStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`
ctx.beginPath()
ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true)
ctx.stroke()
}
}
}
function demo3() {
let canvas = canvasRef3.current
let ctx = canvas.getContext('2d')
ctx.fillStyle = '#fd0'
ctx.fillRect(0, 0, 75,75)
ctx.fillStyle = '#6c0'
ctx.fillRect(75, 0, 75, 75)
ctx.fillStyle = '#09f'
ctx.fillRect(0, 75, 75, 75)
ctx.fillStyle = '#f30'
ctx.fillRect(75, 75, 75, 75)
ctx.fillStyle = '#fff'
ctx.globalAlpha = 0.2
for (let i = 0; i < 6; i++) {
ctx.beginPath()
ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true)
ctx.fill()
}
}
function demo4() {
let canvas = canvasRef4.current
let ctx = canvas.getContext('2d')
ctx.fillStyle = 'rgb(255, 221, 0)'
ctx.fillRect(0, 0, 200, 50)
ctx.fillStyle = 'rgb(102, 204, 0)'
ctx.fillRect(0, 50, 200, 50)
ctx.fillStyle = 'rgb(0, 153, 255)'
ctx.fillRect(0, 100, 200, 50)
ctx.fillStyle = 'rgb(255, 51, 0)'
ctx.fillRect(0, 150, 200, 50)
for (let i = 0; i < 10; i++) {
ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`
for (let j = 0; j < 4; j++) {
ctx.fillRect(10 + 18 * i, 5 + j * 50, 18, 40)
}
}
}
function demo5() {
let canvas = canvasRef5.current
let ctx = canvas.getContext('2d')
for (let i = 0; i < 10; i++) {
ctx.lineWidth = 1 + i
ctx.beginPath()
ctx.moveTo(5.5 + i * 14, 5.5)
ctx.lineTo(5.5 + i * 14, 140.5)
ctx.stroke()
}
}
function demo6() {
let canvas = canvasRef6.current
let ctx = canvas.getContext('2d')
let lineCap = ['butt', 'round', 'square']
ctx.strokeStyle = '#09f'
ctx.beginPath()
ctx.moveTo(10, 20)
ctx.lineTo(140, 20)
ctx.moveTo(10, 130)
ctx.lineTo(140, 130)
ctx.stroke()
ctx.strokeStyle = 'black'
for (let i = 0; i < lineCap.length; i++) {
ctx.lineWidth = 15
ctx.lineCap = lineCap[i]
ctx.beginPath()
ctx.moveTo(25 + i * 50, 20)
ctx.lineTo(25 + i * 50, 130)
ctx.stroke()
}
}
/**
* round 圆角线段
* bevel 不让线段超过最大
*/
function demo7() {
let canvas = canvasRef7.current
let ctx = canvas.getContext('2d')
let lineJoin = ['round', 'bevel', 'miter']
ctx.lineWidth = 10
for (let i = 0; i < lineJoin.length; i++) {
ctx.lineJoin = lineJoin[i]
ctx.beginPath()
ctx.moveTo(-5, 5 + i * 40)
ctx.lineTo(35, 45 + i * 40)
ctx.lineTo(75, 5 + i * 40)
ctx.lineTo(115, 45 + i * 40)
ctx.lineTo(155, 5 + i * 40)
ctx.stroke()
}
}
/**
* setLineDash 虚线交替样式
* lineDashOffset 偏移量
*/
function demo8() {
let canvas = canvasRef8.current
let ctx = canvas.getContext('2d')
let offset = 0
function march() {
offset++
if (offset > 16) {
offset = 0
}
_draw()
setTimeout(march, 50)
}
function _draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.lineWidth = 2
ctx.setLineDash([4, 2])
ctx.lineDashOffset = -offset
ctx.strokeRect(10, 10, 100, 100)
}
march()
}
function demo9() {
let canvas = canvasRef9.current
let ctx = canvas.getContext('2d')
let lineargradient = ctx.createLinearGradient(0, 0, 0, 150)
lineargradient.addColorStop(0, '#00abeb')
lineargradient.addColorStop(0.5, '#fff')
lineargradient.addColorStop(0.5, '#26c000')
lineargradient.addColorStop(1, '#fff')
let radialgradient = ctx.createLinearGradient(0, 50, 0, 95)
radialgradient.addColorStop(0.5, '#000')
radialgradient.addColorStop(1, 'rgba(0, 0, 0, 0')
ctx.fillStyle = lineargradient
ctx.strokeStyle = radialgradient
ctx.fillRect(10, 10, 130, 130)
ctx.strokeRect(50, 50, 50, 50)
}
function demo10() {
let canvas = canvasRef10.current
let ctx = canvas.getContext('2d')
let radgrad = ctx.createRadialGradient(45, 50, 10, 52, 50, 30)
radgrad.addColorStop(0, '#a7d30c')
radgrad.addColorStop(0.9, '#019f62')
radgrad.addColorStop(1, 'rgba(1, 159, 98, 0')
let radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50)
radgrad2.addColorStop(0, '#fff')
radgrad2.addColorStop(0.75, '#ff0188')
radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)')
let radgrad3 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90)
radgrad3.addColorStop(0, '#f4f201')
radgrad3.addColorStop(0.8, '#00B5E2')
radgrad3.addColorStop(1, '#00B5E2')
ctx.fillStyle = radgrad3
ctx.fillRect(0, 0, 150, 150)
ctx.fillStyle = radgrad2
ctx.fillRect(0, 0, 150, 150)
ctx.fillStyle = radgrad
ctx.fillRect(0, 0, 150, 150)
}
function demo11() {
let canvas = canvasRef11.current
let ctx = canvas.getContext('2d')
// 创建 img，作为图案
let img = new Image()
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'
img.onload = function () {
let ptrn = ctx.createPattern(img, 'repeat')
ctx.fillStyle = ptrn
ctx.fillRect(0, 0, 150, 150)
}
}
function demo12() {
let canvas = canvasRef12.current
let ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.fillStyle = '#aaa'
ctx.arc(50, 50, 30, 0, Math.PI * 2, true)
ctx.arc(50, 50, 15, 0, Math.PI * 2, true)
ctx.fill('evenodd')
}
useEffect(() => {
demo1()
demo2()
demo3()
demo4()
demo5()
demo6()
demo7()
demo8()
demo9()
demo10()
demo11()
demo12()
}, [])
return (
<div>
<canvas ref={canvasRef} width="200" height="200" />
<canvas ref={canvasRef2} width="200" height="200" />
<canvas ref={canvasRef3} width="200" height="200" />
<canvas ref={canvasRef4} width="200" height="200" />
<canvas ref={canvasRef5} width="200" height="200" />
<canvas ref={canvasRef6} width="200" height="200" />
<canvas ref={canvasRef7} width="200" height="200" />
<canvas ref={canvasRef8} width="200" height="200" />
<canvas ref={canvasRef9} width="200" height="200" />
<canvas ref={canvasRef10} width="200" height="200" />
<canvas ref={canvasRef11} width="200" height="200" />
<canvas ref={canvasRef12} width="200" height="200" />
</div>
)
}
