En Canvas, el color predeterminado de la línea es negro y el ancho es lpx, pero podemos agregar diferentes estilos a la línea usando propiedades relacionadas. A continuación explicaremos en detalle cómo configurar el estilo de línea desde tres aspectos: ancho, color de trazo y forma del punto final.
1. Establecer el ancho de línea
El ancho de la línea se puede definir usando el atributo lineWidth. El valor de este atributo es un valor numérico (sin unidad), medido en píxeles. El código de muestra para establecer el ancho de la línea es el siguiente:
context.lineNidth='10';El código anterior establece el ancho de línea en 10.
2.Establece el color del trazo
Utilice el atributo StrokeStyle para definir el color del trazo de la línea. El valor de este atributo es un valor de color hexadecimal o el nombre en inglés del color. El código de muestra para configurar el color del trazo es el siguiente:
context.strokeStyle='4f00';
context.strokeStyle='red';En el código anterior, se pueden utilizar ambos métodos para establecer el color del trazo de la línea en rojo.
3. Establecer la forma del punto final
De forma predeterminada, los puntos finales de la línea son cuadrados. La forma de los puntos finales se puede cambiar a través de la propiedad lineCap. El código de muestra es el siguiente:
context.1ineCap=，属性值'；Hay tres valores para el atributo lineCap, como se muestra en la tabla.
El valor del atributo lineCap
Ahora que comprende el método básico para diseñar una línea, le mostraremos cómo diseñar una línea.
(1) Cree C: icodekchapter02 \ demol3.html, cree un lienzo y establezca el ancho, el color y la forma del punto final de la línea. El código específico es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="cas" width="300" height="300">
您的测览器不支持Canvas标签
</canvas>
<script>
var context=document.getElementById('cas').getContext('2d');
context.moveTo(10,10); // 定义初始位置
context.1ineTo(300,10); // 定义连线端点
context.lineWidth='10'; // 设置线的宽度
context.strokeStyle='red'; // 设置线的颜色
context.lineCap='round'; // 设置线的端点形状
context.stroke(); // 定叉描边
</script>
</body>
</html>En el código anterior, la línea 15 de código establece el ancho de la línea en 10 píxeles: la línea 16 de código establece el color de la línea en rojo; la línea 17 de código establece el punto final de la línea en un círculo.
(2) Guarde el código y pruébelo en el navegador. El efecto de la página es como se muestra en la figura.
Establecer el ancho de línea, el color y la forma del punto final
La página muestra una línea roja, lo que indica que hemos configurado correctamente el estilo de la línea.