Od provozovatele projektu Rychlost.CZ
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: