Notas de estudio de Canvas: dibujar caminos simples

Pasos generales para dibujar segmentos de línea:

moveTo(x,y) mueve el pincel al punto de coordenadas especificado (x,y)

lineTo(x,y) usa una línea recta para conectar el punto final actual y el punto de coordenadas especificado (x,y)

trazo() dibuja la ruta actual o existente de acuerdo con el estilo de dibujo lineal actual

Pasos generales para dibujar un camino rectangular:

rect(x, y, ancho, alto) ruta rectangular, punto de coordenadas (x, y), ancho alto

trazo() o relleno dibuja o rellena el trazado según el estilo actual

También puede usar el trazoRect o el rellenoRect mencionados anteriormente, o unirlos en un rectángulo a través de lineTo.

Primero veamos la API para dibujar arcos:

ctx.arc(x, y, radio, startAngle, endAngle, en sentido antihorario);

Centro de arco x, y, radio radio de arco, punto inicial de ángulo inicial, punto final del arco de ángulo final, en sentido antihorario el valor predeterminado es en sentido horario, verdadero en sentido antihorario

Todas las rotaciones en CSS usan ángulos (grados), pero la unidad utilizada para expresar ángulos en la función de arco son radianes, no ángulos. Expresiones JS de ángulos y radianes: radianes = (Math.PI/180) * ángulo (grados).

El radian aquí se calcula en función de la dirección positiva del eje x y el ángulo de rotación en el sentido de las agujas del reloj de forma predeterminada.

Ilustración:

(foto del desierto)

 ctx.beginPath();ctx.arc(200, 100, 100, 0, Math.PI / 2, falso);ctx.closePath();ctx.stroke();ctx.fill();

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.