Primitivas

Contactar con el profesor

Rectángulo

//Rectángulo con borde
ctx.rect(40, 100, 100, 200);
ctx.fillStyle = "#8ED6FF";
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = "black";
ctx.stroke();

Arco

ctx.fillStyle = "green";
//arc(cx, cy, radio, inicioArco (rad), finArco(rad), sentido horario)
ctx.arc(180, 120, 60, 1* Math.PI, Math.PI * 2, true);
ctx.fill();

Ejercicio

Hacer un mini paint.

document.onmousedown = ratonPulsado;
document.onmouseup = ratonLevantado;

function ratonLevantado(){
	document.onmousemove = null;
}
function ratonPulsado(){
	document.onmousemove = ratonSeMueve;
}
	
function ratonSeMueve(event) {
	var x = event.clientX;
	var y = event.clientY;
	ctx.beginPath();
	...
	ctx.closePath();
}

Hacer la página del enlace

Recursos

Primitivas 1
Primitivas 2

Código HTML necesario:

<div style="background:url(images/monstruo.png); width:1024px; height:768px;position:absolute; z-index: 10"></div>
<div style="background:url(images/cornea.png);margin-left:470px; margin-top:130px;width:182px; height:192px; position:absolute; z-index: 3"></div>
<canvas id="canvas" width="400px" height="400px" style="position:absolute;z-index:6;  margin-left:350px; border: solid black 2px"></canvas>

line

ctx.moveTo(50, 50);
ctx.lineTo(150, 150);
ctx.lineTo(150, 250);
ctx.lineWidth = 10;
ctx.strokeStyle = "#ff0000";
ctx.lineCap = "round"; //tres valores: butt, round, or square
ctx.stroke();

text

ctx.font = "40pt Calibri";
ctx.fillStyle = "#0000ff"; // text color
ctx.fillText("Hello World!", 50, 100);   
ctx.lineWidth = 3;
ctx.strokeStyle = "green";
//start, end, left, center, or right. left es el valor por defecto
//left equivale a start
//right equivale a end
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.strokeText("Hello World!", 50, 100);

text, metrics

var text = "Hello World!";
ctx.font = "30pt Calibri";
ctx.textAlign = "start";
ctx.fillStyle = "blue";
ctx.fillText(text, 50, 50);
// get text metrics
var metrics = ctx.measureText(text);
var width = metrics.width;
alert(width);

image

var imageObj = new Image();
imageObj.src = "logo.png";

imageObj.onload = function() {
	//VARIAS FORMAS DE INSERCION:
			
	//Poner la imagen:
	//(objetoImagen, posicion x, posicion y)
	ctx.drawImage(imageObj, 0, 0);
				
	//Poner la imagen redimensionando:
	//(objetoImagen, posicion x, posicion y, ancho, alto)
	ctx.drawImage(imageObj, 300, 0, 50, 50);
				
	//Poner la imagen redimensionando y recortando:
	//ctx.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, 			destWidth, destHeight);
	ctx.drawImage(imageObj, 100, 100, 180, 180,200,200, 200,200) 
};

shadow

ctx.shadowColor = "#000000";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 10;
						
ctx.fillStyle = "rgba(0,0,255,1)";
ctx.fillRect(20,20,200,100);

gradient

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
//coordenadas del punto inicial y final del degradado
var grd = ctx.createLinearGradient(0, 0, 400, 400);
grd.addColorStop(0, "pink");
grd.addColorStop(0.5, "red");
grd.addColorStop(1, "blue");
ctx.fillStyle = grd;
ctx.fillRect(0,0,400,400);
← save
Convertir un svg a código del canvas de HTML5 →

Aviso Legal | Política de privacidad