<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
Pasos para <!-- dibujo: Consigue el elemento de lienzo - > el contexto - rellena y dibuja el borde > > establece el estilo de dibujo - >
<!-- dibujar otros grafos complejos requiere caminos: Empieza a crear un camino - > Crea un camino de dibujo - > Cierra camino - > Grafo de dibujo - >
<!--ejemplo: Dibuja un rectángulo - >
Dibuja un rectángulo: <canvas id="ca"></canvas><br/>
Dibuja un círculo: <canvas id="yuan"></canvas>
</body>
</html>
<scrip{filter}t>
Dibuja un rectángulo
función draw(){
var canvas=document.getElementById('ca'); Consigue el elemento de lienzo
if (lienzo==null)
return false;
var context=canvas.getContext('2d'); Entiende el contexto
context.fillStyle='#EEEFF'; Color de relleno
context.fillRect(0,0,400,300); Rectángulo de relleno (Rectángulo 1)
context.fillStyle='red';
context.strokeStyle='azul'; Color del borde
contexto.anchoLínea=1; Ancho del bisel
context.fillRect(50,50,100,100); Rectángulo de relleno (Rectángulo interior 2)
contexto.strokeRect(50,50,100,100); Dibujar el borde
}
Dibujar círculos
función drawarc(){
var canvas2=document.getElementById('yuan'); Consigue el elemento de lienzo
if (canvas2==null)
if(canvas2==null)
return false;
var context2=canvas2.getContext('2d'); Entiende el contexto
context2.fillStyle='#EEEEEF';
context2.fillRect(0,0,400,300);
var n=0;
for(var i=0; i<10; i++){
contexto2.iniciarCamino(); Empieza a crear un camino
context2.arc(i*25,i*25,i*10,0,Math.PI*2,true); Crear un camino circular
context2.cercaCamino(); Cierra el camino
context2.fillStyle='Rgba(255,0,0,0.25)'; Establece el color
context2.fill(); Rellena el gráfico
}
}
</scrip{filter}t>
|
Publicado en 14/12/2018 16:41:58
|
|
|
|
Publicado en 14/12/2018 17:18:19
|
Publicado en 14/12/2018 17:37:03
|
