English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
em HTML5Uma das formas mais fáceis de desenhar no elemento canvas é o retângulo. Você pode usar2As funções contexto.fillRect() e contexto.strokeRect().
em HTML5Uma das formas mais fáceis de desenhar no elemento canvas é o retângulo. Você pode usar2As funções contexto.fillRect() e contexto.strokeRect(). Este é um exemplo simples:
<canvas id="ex1" largura="500" altura="150" style="border: 1px sólido #cccccc;">
HTML5 Canvas não suportado
</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>Teste para ver ‹/›Você pode usar lineWidth2A propriedade do contexto D define a largura da linha de contorno do retângulo. O método é o seguinte:
<canvas id="ex4" largura="500" altura="150" style="border: 1px sólido #cccccc;">
HTML5 Canvas não suportado
</canvas>
<script>
var canvas = document.getElementById("ex4");
var context = canvas.getContext("2d");
var x = 10;
var y = 10;
var largura = 100;
var altura = 100;
contexto.larguraLinha = 4;
contexto.strokeRect(x, y, largura, altura);
</script>Teste para ver ‹/›Esta é a largura da linha:4para definir a aparência do retângulo:
Você pode usar 2A propriedade fillStyle ou strokeStyle do contexto D define a cor de desenho do retângulo. Este é o primeiro exemplo, essas configurações são exibidas em negrito:
<canvas id="ex5" largura="500" altura="150" style="border: 1px sólido #cccccc;">
HTML5 Canvas não suportado
</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>Teste para ver ‹/›Este é o retângulo desenhado novamente no canvas: