Directorio de artículos
1. Color
Hay dos propiedades para establecer el color:
fillStyle
strokeStyle
Color aleatorio
setInterval(() => draw(pen), 1000);
function draw(pen) {
pen.fillStyle = `rgba(${
random(0, 255)},${
random(0, 255)},${
random(0, 255)})`
pen.rect(0, 0, 300, 300)
pen.fill()
}
function random(x, y) {
return Math.round(Math.random() * (y - x) + x);
}
Efecto:
2. Transparencia
alfa global
opacidad aleatoria negra
pen.globalAlpha = random(0, 100) / 100
pen.clearRect(0, 0, 300, 300)
pen.rect(0, 0, 300, 300)
pen.fill()
Efecto:
3. Líneas
lineWidth: Espesor.
estará alineado al centro.
Dibujar rectángulo con línea gruesa
pen.lineWidth = 300
pen.beginPath();
pen.moveTo(0, 0);
pen.lineTo(300, 0);
pen.closePath();
pen.stroke();
Efecto:
lineCap: tipo final.
Butt está truncado, el
semicírculo redondo predeterminado resalta
el rectángulo cuadrado de ancho medio y
dibuja un arco con el extremo
pen.lineWidth = 300
pen.lineCap = 'round'
pen.beginPath()
pen.moveTo(0, 150)
pen.lineTo(150, 150)
pen.stroke();
Efecto:
lineJoin: el estilo en el punto de inflexión es
redondo y suave , el
bisel está truncado y el
inglete se extiende hasta la intersección, por defecto
miterLimit
límite extendido
La línea punteada
setLineDash establece la línea alternativaDashOffset
establece el desplazamiento al principio
pen.clearRect(0, 0, 300, 300)
pen.lineWidth = 5
pen.setLineDash([5, 5])
pen.beginPath()
pen.moveTo(0, 150)
pen.lineTo(300, 150)
pen.stroke();
Efecto:
4. Gradiente
Proceso de degradado:
1, crear objeto
2, agregar color
3, asignar a estilo de relleno
Hay dos tipos de objetos, área rectangular y área circular.
createLinearGradient(x1, y1, x2, y2)
esquinas opuestas del rectángulo
createRadialGradient(x1, y1, r1, x2, y2, r2)
dos círculos
Añadir color:
addColorStop(posición, color)
La posición no es mayor que uno, que es donde está el color.
Un círculo de negro a blanco:
let change=pen.createRadialGradient(150, 150, 0, 150, 150, 150)
change.addColorStop(0,"white")
change.addColorStop(1,"black")
pen.fillStyle=change
pen.fillRect(0,0,300,300)
Efecto:
5. Patrón
Simplemente use la imagen como estilo, que es un poco como
createPattern (imagen, tipo) con el color de fondo
Mostrar una imagen:
let img = new Image();
img.src = 'a.jpg';
img.onload = function () {
pen.fillStyle = pen.createPattern(img, 'no-repeat');
pen.fillRect(0, 0, 300, 300);
}
Efecto:
6. Sombras
shadowColor: Color
shadowBlur: Desenfoque
shadowOffsetX: Offset X
shadowOffsetY: Offset Y
pen.fillStyle = "black";
pen.fillRect(0, 0, 50, 50);
pen.shadowColor = "black"
pen.shadowOffsetX = 50
pen.shadowOffsetY = 50
Efecto:
7. Reglas de llenado
conocimiento de gráficos. . .
Al rellenar, puede especificar un parámetro
evenodd: relleno impar y par.
distinto de cero: metafísica.
pen.beginPath()
pen.arc(150, 150, 150, 0, 2 * Math.PI)
pen.arc(150, 150, 125, 0, 2 * Math.PI)
pen.arc(150, 150, 100, 0, 2 * Math.PI)
pen.arc(150, 150, 75, 0, 2 * Math.PI)
pen.arc(150, 150, 50, 0, 2 * Math.PI)
pen.arc(150, 150, 25, 0, 2 * Math.PI)
pen.fill("evenodd")
Efecto:
