| nav |
group |
|
|
| title |
order |
path |
| 💊 canvas |
2 |
/canvas |
|
颜色
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>
);
};
