Para dibujar un rectángulo en canvas debemos utilizar el método rect(), el cual utiliza los parámetros x y y para posicionar desde el origen cero; así mismo, cuenta con un ancho y altura que dan el tamaño, ya sea para formar un rectángulo o un cuadrado, a continuación se muestra como se aplica:
beginPath();//Comenzamos a dibujar
rect(x, y, ancho, altura);
fillStyle = '#ffe33a';//El color de nuestro fondo del rectangulo
fill();//Ejecutar nuestro estilo
También podemos poner un borde a nuestro rectángulo de la siguiente manera:
lineWidth = 7;//El ancho del borde
strokeStyle = '#4388cc';//El color del borde
stroke(); //Llamar a la funcion que ejecute el borde
Abrimos nuestro editor de texto y pegamos el siguiente codigo para practicar:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#dibuja{
background: #1a1a1a;
}
</style>
</head>
<body>
<canvas id="dibuja" width="855" height="315"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("dibuja");
var ctx=canvas.getContext('2d');
ctx.rect(188, 50, 100, 100);
ctx.fillStyle = '#ffe33a';
ctx.fill();
ctx.lineWidth = 7;
ctx.strokeStyle = '#4388cc';
ctx.stroke();
</script>
</body>
</html>
Nos quedaría un cuadrado como se muestra en la siguiente figura:
Podemos dibujar con rect() un cuadrado o un rectángulo cambiando los valores de ancho y altura , en esta ocasión el ancho y la altura tiene el mismo valor, formando así, un cuadrado.
Para ver el significado y la revolución que ha traído HTML5 en canvas, intentaremos dibujar confeti cuadrado de un solo color, anidando ciclos for:
var canvas=document.getElementById("dibuja");
var ctx=canvas.getContext('2d');
var x=10;
var y=10;
var incre=50;
var increy=50;
for(var i=0;i<150;i++){
for(var j=0;j<6;j++){
s=incre*i;
d=increy*j;
ctx.beginPath();
ctx.rect(x+s, y+d,40, 40);
ctx.fillStyle = '#ffe33a';
ctx.fill();
}
}
Quedado de la siguiente manera, como se muestra en la figura de abajo:
Como observamos, los cuadro son muy grandes, así que los iremos disminuyendo hasta que nos agrade el tamaño. Para poder esparcir los cuadros, utilizaremos el método que hace girar al contexto canvas:
rotate((Math.PI/180)*5);//De 0 hasta 360 grados
Giraremos el contexto 5 grados y reduciremos nuestros cuadros hasta 13px en ambos lados:
var canvas=document.getElementById("dibuja");
var ctx=canvas.getContext('2d');
var x=10;
var y=10;
var incre=15;
var increy=15;
for(var i=0;i<100;i++){
for(var j=0;j<50;j++){
s=incre*i;
d=increy*j;
ctx.rotate((Math.PI/180)*5);
ctx.beginPath();
ctx.rect(x+s,y+d,13,13);
ctx.fillStyle = '#32ddbf';
ctx.fill();
}
}
El confeti de un solo color quedar así:
Para terminar, añadimos diferentes colores a nuestros cuadros; sustituyendo el color fillStyle:
ctx.fillStyle = 'rgb(' +
parseInt(Math.random() * 104+104) + ',' +
parseInt(Math.random() * 139+139) + ',' +
parseInt(Math.random() * 111+111) + ')';
No hay comentarios:
Publicar un comentario