WebDev.wiki > Návody pro webmastery a vývojáře > Kreslení geometrických tvarů

Kreslení geometrických tvarů - Canvas

vydáno: 06.01.2016, seriál: Canvas

Toto je 2. díl seriálu Canvas, pokud se dostatečně neorientujete, zkuste první díl.

Definice a použití

V tomto příkladu si ukážeme jak jednoduše nakreslit základní geometrické tvary.

Ukázka:

CSS

.canvas-over { padding:10px; }
.canvas-over canvas { border:5px solid #000;width:250px;height:250px; }

Použité vlastnosti: padding, border, width, height

Javascript

var canvas=document.getElementById("canvas1");
var ctx=canvas.getContext("2d");

ctx.strokeStyle="#E40000";
ctx.fillStyle="#61C300";
ctx.lineWidth=1;

ctx.rect(10,10,40,40);
ctx.stroke();

ctx.fillRect(60,20,40,40);

ctx.beginPath();
ctx.arc(130,50,20,0,2*Math.PI);
ctx.stroke();

HTML

<div class="canvas-over"><canvas id="canvas1" width="250" height="250"></canvas></div>

Použité tagy: <div>, <canvas>

Výsledek:

HTML5: návody a průvodce

JavaScript: návody a průvodce

Seriál Canvas

Seznam všech článků seriálu:

Začínáme s CANVASem
Kreslení geometrických tvarů

Témata

Seriály

Kreslení geometrických tvarů - Canvas

Definice a použití

Seriál Canvas

Seznam všech článků seriálu: