Dibujando en El Canvas - Parte 2

DIBUJANDO EN EL CANVAS – PARTE 2
Una de las características fundamentales del canvas, es que podemos dibujar en él. Pero antes de iniciar a dibujar en el canvas, borremos la sentencia
alert(“Bienvenidos al canvas”); del archivo de la sección anterior.
Esta línea será borrada y aquí se proporcionará el

código necesario para dibujar en canvas, las
diversas formas proporcionando formato de
relleno, borde, entre otros.
Abriremos el ejercicio canvasBase01.html que se muestra en la imagen anterior y modificaremos el ejercicio con la intención de desarrollar varias prácticas que
nos permitirán dibujar en el canvas. Las líneas a agregar están marcadas en verde que serán colocadas en lugar del comando alert, y cambiar el encabezado de
cada página para el título dentro de las etiquetas <h1> </h1>.
NOMBRE DEL EJERCICIO CÓDIGO NOMBRE DEL ARCHIVO

Dibujando arcos con <!doctype html> canvasBase07.html
canvas <html>
<head>
<meta charset="UTF-8">
<title>CANVAS</title>
<style>
#miCanvas{
border:dotted 2px yellow;
background:green;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById("miCanvas");
if(canvas && canvas.getContext){
var ctx = canvas.getContext("2d");
if(ctx){
//Descripcion de lineas
ctx.lineWidth = 10;
ctx.strokeStyle = "yellow";
ctx.fillStyle = "red";
//Primer arco
ctx.beginPath();
ctx.arc(100,150,50,1.1*Math.PI, 1.9*Math.PI);
ctx.stroke();
//Segundo arco
ctx.beginPath();
ctx.arc(250,150,50, 1.1*Math.PI, 1.9*Math.PI,true);
ctx.stroke();
//Tercer arco
ctx.beginPath();
ctx.arc(400,150,50, 0, 2*Math.PI,true);
ctx.stroke();
} else {
alert("Error al crear tu contexto");
}
}
}
</script>
</head>
<body>
<h1>Arcos CANVAS</h1>
<canvas id="miCanvas" width="500px" height="300px">
Tu navegador no soporta CANVAS
</canvas>
</body>
</html>
Dibujando curvas bézier <!doctype html> canvasBase08.html
<html>
<head>
<style>
#miCanvas{
background:green;
}
</style>
<script>
if(ctx){
//Colores
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.fillStyle = "yellow";
//Curva bezier
ctx.beginPath();
//Primer punto
ctx.moveTo(50,20);
//Dibujamos la curva
ctx.bezierCurveTo(50,100, 200,100, 200,150);
//Dibujamos la curva
ctx.stroke();
//Primer punto
ctx.fillRect(50,20,5,5);
//Primer punto tangente

//Segundo punto tangente

//Segundo punto ancla

} else {
}
}
}
</script>
</head>
<body>
<h1>Curvas bézier</h1>
</canvas>
</body>
</html>
Los gradientes lineales <!doctype html> canvasBase09.html
en el canvas <html>
<head>
<style>
#miCanvas{
background:green;
}
</style>
<script>
if(ctx){
var gradiente = ctx.createLinearGradient(0,0,canvas.width,0);
gradiente.addColorStop(0, "green");
gradiente.addColorStop(0.35, "white");
gradiente.addColorStop(1, "red");
ctx.fillStyle = gradiente;
ctx.fillRect(0,0,canvas.width,canvas.height);
} else {
}
}
}
</script>
</head>
<body>
<h1>Gradientes lineales</h1>
</canvas>
</body>
</html>
Diferentes direcciones <!doctype html> canvasBase10.html
del canvas <html>
<head>
<style>
#miCanvas{
background:green;
}
</style>
<script>
if(ctx){
var h = canvas.height;
var w = canvas.width;
var gradiente = ctx.createLinearGradient(0,0,w/2,0);
gradiente.addColorStop(0, "pink");
gradiente.addColorStop(0.15, "yellow");
ctx.fillRect(0,0,w/2,h/2);
//Gradiente vertical
gradiente = ctx.createLinearGradient(0,0,0,h/2);
ctx.fillRect(w/2,0,w/2,h/2);
//Diagonal 1
gradiente = ctx.createLinearGradient(0,h/2,w/2,h);
ctx.fillRect(0,h/2,w/2,h);
//Diagonal 2
gradiente = ctx.createLinearGradient(w/2,h,w,h/2);
ctx.fillRect(w/2,h/2,w,h);
} else {
}
}
}
</script>
</head>
<body>
<h1>Diferentes direcciones de gradientes</h1>
</canvas>
</body>
</html>
Gradientes radiales <!doctype html> canvasBase11.html
<html>
<head>
<style>
#miCanvas{
background:green;
}
</style>
<script>
if(ctx){
var gradiente = ctx.createRadialGradient(canvas.width/2,
canvas.height,10,canvas.width/2,0,100);
ctx.fillRect(0,0,canvas.width, canvas.height);
var gradiente = ctx.createRadialGradient(

canvas.width/2,
canvas.height/2,
10,
canvas.width/2,
canvas.height/2,
300);
ctx.fillRect(0,0,canvas.width, canvas.height);
} else {
}
}
}
</script>
</head>
<body>
<h1>Gradientes radiales</h1>
</canvas>
</body>
</html>
Como se observa deberás generar 5 páginas con la intención de observar diversos objetos que se pueden dibujar en un canvas empleando los códigos JavaScript
A continuación, se muestran los dibujos resultantes:

Dibujando en El Canvas - Parte 2

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Dibujando en El Canvas - Parte 2

Cargado por

Copyright:

Formatos disponibles

DIBUJANDO EN EL CANVAS – PARTE 2

Esta línea será borrada y aquí se proporcionará el

NOMBRE DEL EJERCICIO CÓDIGO NOMBRE DEL ARCHIVO

//Primer punto tangente

//Segundo punto tangente

//Segundo punto ancla

var gradiente = ctx.createRadialGradient(

A continuación, se muestran los dibujos resultantes:

También podría gustarte