English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
en HTML5Una de las formas más fáciles de dibujar en el elemento lienzo es el rectángulo. Puede usar2Las funciones contexto.fillRect() y contexto.strokeRect().
en HTML5Una de las formas más fáciles de dibujar en el elemento lienzo es el rectángulo. Puede usar2Las funciones contexto.fillRect() y contexto.strokeRect(). Este es un ejemplo simple:
<canvas id="ex1" ancho="500" altura="150" style="border: 1px sólido #cccccc;">
HTML5 No se admite Canvas
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);
</script>Prueba para ver ‹/›Puede usar lineWidth2Establezca la anchura de la línea del rectángulo de contorno del contexto D. El método es el siguiente:
<canvas id="ex4" ancho="500" altura="150" style="border: 1px sólido #cccccc;">
HTML5 No se admite Canvas
</canvas>
<script>
var canvas = document.getElementById("ex4");
var context = canvas.getContext("2d");
var x = 10;
var y = 10;
var ancho = 100;
var altura = 100;
contexto.anchoLínea = 4;
contexto.strokeRect(x, y, ancho, altura);
</script>Prueba para ver ‹/›Esta es la anchura de la línea4para cambiar la apariencia del rectángulo:
Puede usar 2Establezca el color de dibujo del rectángulo utilizando las propiedades fillStyle o strokeStyle del contexto D. Este es el primer ejemplo, estas configuraciones se muestran en negrita:
<canvas id="ex5" ancho="500" altura="150" style="border: 1px sólido #cccccc;">
HTML5 No se admite Canvas
</canvas>
<script>
var canvas = document.getElementById("ex5");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);
</script>Prueba para ver ‹/›Este es el rectángulo dibujado nuevamente en el lienzo: