Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
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
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);