Valoración del artículo:En este artículo vamos a hablar de la configuración de las uniones en segmentos del camino, que se pueden realizar de tres maneras distintas. Además veremos un ejemplo que muestre cómo son cada una de estas diferentes configuraciones.
El valor "miter" de la propiedad lineJoin, representado en la imagen con color rojo, es el que se da como predeterminado e indica que las uniones tienen que formar esquinas perfectas, en el ángulo que lleve el camino.
El valor "round" hace que las uniones entre segmentos del camino se realicen con esquinas redondeadas. Se puede ver en color verde en la imagen anterior.
El valor de lineJoin "bevel" hace que las uniones no sean angulosas, pero tampoco redondeadas. Podemos verlo en la imagen anterior en la forma de color azul. Como se puede apreciar, hace que los ángulos producidos por dos líneas segmentos de camino tengan un biselado.
var ctx = cargaContextoCanvas('micanvas');
if(ctx){
//defino un array con los distintos valores de lineJoin
var valores_lineJoin = ["miter", "round", "bevel"];
//defino un array con colores
var colores = ["#900", "#090", "#009"]
//configuro el grosor de línea
ctx.lineWidth = 20;
//bucle para hacer tres rectángulos con distintas configuraciones
for (i=0; i<3; i++){
//cargo la configuración de lineJoin
ctx.lineJoin = valores_lineJoin[i];
//cargo la configuración de color
ctx.strokeStyle = colores[i];
//dibujo un rectángulo
ctx.strokeRect((i * 160) + 20, 20, 120, 80);
}
}
Como se puede ver, hemos realizado las tres formas con un bucle for, desde 0 hasta 2, lo que nos permite recorrer un array con distintos valores de lineJoin, que vamos asignando para cada uno de los rectángulos.
Se puede ver el código completo del ejemplo a continuación.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html>
<head>
<title>Junturas o uniones de líneas en el canvas</title>
<script language="javascript">
function cargaContextoCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if(elemento && elemento.getContext){
var contexto = elemento.getContext('2d');
if(contexto){
return contexto;
}
}
return false;
}
window.onload = function(){
var ctx = cargaContextoCanvas('micanvas');
if(ctx){
//defino un array con los distintos valores de lineJoin
var valores_lineJoin = ["miter", "round", "bevel"];
//defino un array con colores
var colores = ["#900", "#090", "#009"]
//configuro el grosor de línea
ctx.lineWidth = 20;
//bucle para hacer tres rectángulos con distintas configuraciones
for (i=0; i<3; i++){
//cargo la configuración de lineJoin
ctx.lineJoin = valores_lineJoin[i];
//cargo la configuración de color
ctx.strokeStyle = colores[i];
//dibujo un rectángulo
ctx.strokeRect((i * 160) + 20, 20, 120, 80);
}
}
}
</script>
</head>
<body>
<h1>Junturas o uniones de líneas en el canvas</h1>
<canvas id="micanvas" width="500" height="200">
Tu navegador no soporta canvas.
</canvas>
</body>
</html>
Para acabar, podemos ver el ejemplo en marcha en una página aparte.
Compartir en redes sociales
2 comentarios revisados:| agradecimiento Por: carlos | 21/11/2010
|
| Agradecimientos Por: Antonio | 04/12/2010
|
Usuarios: 
09 de November de 2010
