Scribd
Upload
20 views5 pages

Colocar Id Tamaño1 Tamaño2 Agregar Color Tamaño y Grosor de Línea Mensaje de Error

The document contains code examples for drawing different shapes and gradients on an HTML5 canvas element using JavaScript. It includes code for drawing a rectangle, lines, a circle, and a linear gradient. For each example, the code gets the canvas context, sets drawing properties like fill styles, and uses canvas drawing methods like fillRect(), moveTo(), lineTo(), arc(), and createLinearGradient() to render shapes and colors on the canvas.

Uploaded by

CharitoEscalanteBarraza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views5 pages

Colocar Id Tamaño1 Tamaño2 Agregar Color Tamaño y Grosor de Línea Mensaje de Error

The document contains code examples for drawing different shapes and gradients on an HTML5 canvas element using JavaScript. It includes code for drawing a rectangle, lines, a circle, and a linear gradient. For each example, the code gets the canvas context, sets drawing properties like fill styles, and uses canvas drawing methods like fillRect(), moveTo(), lineTo(), arc(), and createLinearGradient() to render shapes and colors on the canvas.

Uploaded by

CharitoEscalanteBarraza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

CDIGO CANVAS

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EJEMPLO 2 - 3</title>
</head>
<body>
<canvas id="Colocar id" width="tamao1" height="tamao2" style="border: Agregar
color; tamao y grosor de lnea">Mensaje de error</canvas>
Aqu va el cdigo script
</body>
</html>

RECTNGULO CANVAS
<script type="text/javascript">
var c=document.getElementById("miCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="Blue";
cxt.fillRect(50,10,200,100);
</script>

LNEAS CANVAS
<script type="text/javascript">
var c=document.getElementById("holaCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(10,90);
cxt.lineTo(10,50);
cxt.lineTo(30,50);
cxt.lineTo(30,10);
cxt.lineTo(30,90);
cxt.moveTo(40,10);
cxt.lineTo(40,90);
cxt.lineTo(60,90);
cxt.lineTo(60,10);
cxt.lineTo(40,10);
cxt.moveTo(70,10);
cxt.lineTo(70,90);
cxt.lineTo(90,90);
cxt.moveTo(100,90);
cxt.lineTo(100,10);
cxt.lineTo(120,10);
cxt.lineTo(120,90);
cxt.lineTo(120,50);
cxt.lineTo(100,50);
cxt.stroke();
</script>

CRCULO CANVAS
<script type="text/javascript">
var c=document.getElementById("logotipo");
var cxt=c.getContext("2d");
cxt.fillStyle="blue";
cxt.beginPath();
cxt.arc(60,60,50,0,Math.PI*2,true);
cxt.closePath;
cxt.fill();
cxt.fillStyle="white";
cxt.beginPath();
cxt.arc(60,60,30,0.75*Math.PI,Math.PI*2,true);
cxt.closePath;
cxt.fill();
cxt.fillStyle="white";
cxt.beginPath();
cxt.arc(70,40,10,Math.PI,Math.PI*2,false);
cxt.closePath;
cxt.fill();
cxt.fillStyle="white";
cxt.beginPath();
cxt.arc(40,50,10,1.8*Math.PI,0.8*Math.PI,true);
cxt.closePath;
cxt.fill();
</script>

DEGRADADOS CANVAS
<script type="text/javascript">
var c=document.getElementById("gradiente");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(100,0,300,0);
grd.addColorStop(0,"White");
grd.addColorStop(0.25,"Red");
grd.addColorStop(0.5,"Green");
grd.addColorStop(0.75,"Blue");
grd.addColorStop(1,"Black");
cxt.fillStyle=grd;
cxt.fillRect(00,00,400,400);
</script>

You might also like