HTML5JSCanvas

<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Titulek stránky</title>
</head>
<body onload="zobrazTelefon(248)">

<center>
<form>
<input id="velikost" type="range" min="0" max="496" onchange="zobrazTelefon(this.value)" style="width: 500px;">
</form>


<canvas id="myCanvas" width="500px" height="1000">
</canvas>
</center>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");


function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
    ctx.lineTo(x + width, y + height - radius);
    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
    ctx.lineTo(x + radius, y + height);
    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
    ctx.lineTo(x, y + radius);
    ctx.quadraticCurveTo(x, y, x + radius, y);
    ctx.closePath();
    if (stroke) {
        ctx.stroke();
    }
    if (fill) {
        ctx.fill();
    }
}

function circle(ctx, x, y, size, fill, stroke){
    ctx.beginPath();
    ctx.arc(x,y, size, 0, 2*Math.PI);
    ctx.stroke();
    if (stroke) {
        ctx.stroke();
    }
    if (fill) {
        ctx.fill();
    }
}


function zobrazTelefon(velikost){

c.height = c.height;

var posunX = (500-velikost)/2;
var posunY = 10;

var TelefonSirka = velikost;
var TelefonVyska = TelefonSirka * 1.96587030717;
var TelefonZaobleni = TelefonSirka / 10;
var TelefonTloustka = TelefonSirka / 100;

var DisplejSirka = TelefonSirka * 0.88054607508;
var DisplejVyska = DisplejSirka * 1.48546511628;
var DisplejOdsazeniZleva = (TelefonSirka - DisplejSirka) / 2;
var DisplejOdsazeniZhora = (TelefonVyska - DisplejVyska) / 2;

var TlacitkoVelikost = TelefonSirka / 9;
var TlacitkoOdsazeniZleva = TelefonSirka / 2;
var TlacitkoOdsazeniZhora =  TelefonVyska - (DisplejOdsazeniZhora / 2);
var TlacitkoTloustka = TelefonSirka / 100;

var TlacitkoSymbolVelikost = (TlacitkoVelikost*2)/3;
var TlacitkoSymbolOdsazeniZleva = (TelefonSirka - TlacitkoSymbolVelikost) / 2;
var TlacitkoSymbolOdsazeniZhora = TlacitkoOdsazeniZhora - (TlacitkoSymbolVelikost / 2);
var TlacitkoSymbolTloustka = TelefonSirka / 150;
var TlacitkoSymbolZaobleni = TlacitkoSymbolVelikost * 0.3375;

var TlacitkoGRD_zacatek = (TelefonSirka / 2) - TlacitkoVelikost;
var TlacitkoGRD_konec = (TelefonSirka / 2) + TlacitkoVelikost;
var grd = ctx.createLinearGradient(TlacitkoGRD_zacatek + posunX, 0, TlacitkoGRD_konec + posunX, 0);
grd.addColorStop(0,"#2A2A2A");
grd.addColorStop(1,"black");

var SluchatkoSirka = TelefonSirka / 4;
var SluchatkoVyska = SluchatkoSirka / 8;
var SluchatkoOdsazeniZleva = (TelefonSirka - SluchatkoSirka) / 2;
var SluchatkoOdsazeniZhora = (DisplejOdsazeniZhora - SluchatkoVyska) / 2;
var SluchatkoZaobleni = SluchatkoVyska / 2;
var SluchatkoTloustka = SluchatkoVyska / 4;

var FotakPodkladVelikost = SluchatkoVyska / 2;
var FotakPodkladOdsazeniZleva = TelefonSirka / 3.5;
var FotakPodkladOdsazeniZhora = SluchatkoOdsazeniZhora + FotakPodkladVelikost;

var FotakVelikost = FotakPodkladVelikost / 2;

// telo telefonu
roundRect(ctx, posunX, posunY, TelefonSirka-1+1, TelefonVyska, TelefonZaobleni, true, false);

// ramecek telefonu
ctx.strokeStyle = '#D0D0D0';
ctx.lineWidth = TelefonTloustka;
roundRect(ctx, posunX, posunY, TelefonSirka-1+1, TelefonVyska, TelefonZaobleni, false, true);

// displej
ctx.fillStyle = '#202020';
ctx.fillRect(DisplejOdsazeniZleva + posunX, DisplejOdsazeniZhora + posunY, DisplejSirka, DisplejVyska);

// vypln tlacitka
ctx.fillStyle = grd;
//ctx.fillRect(0,0, 500, 50); // TEST PRECHODU
circle(ctx, TlacitkoOdsazeniZleva + posunX, TlacitkoOdsazeniZhora + posunY, TlacitkoVelikost - (TlacitkoTloustka / 3), true, false);

// ramecek tlacitka
ctx.lineWidth = TlacitkoTloustka;
ctx.strokeStyle = '#181818';
circle(ctx, TlacitkoOdsazeniZleva + posunX, TlacitkoOdsazeniZhora + posunY, TlacitkoVelikost, false, true);

// symbol tlacitka
ctx.strokeStyle = '#D0D0D0';
ctx.lineWidth = TlacitkoSymbolTloustka;
roundRect(ctx, TlacitkoSymbolOdsazeniZleva + posunX, TlacitkoSymbolOdsazeniZhora + posunY, TlacitkoSymbolVelikost, TlacitkoSymbolVelikost, TlacitkoSymbolZaobleni, false, true);

// vypln sluchatka
ctx.fillStyle = '#505050';
roundRect(ctx, SluchatkoOdsazeniZleva + posunX, SluchatkoOdsazeniZhora + posunY, SluchatkoSirka, SluchatkoVyska, SluchatkoZaobleni, true, false);

// ramecek sluchatka
ctx.strokeStyle = '#323232';
ctx.lineWidth = SluchatkoTloustka;
roundRect(ctx, SluchatkoOdsazeniZleva + posunX, SluchatkoOdsazeniZhora + posunY, SluchatkoSirka, SluchatkoVyska, SluchatkoZaobleni, false, true);

// podklad fotaku
ctx.fillStyle = '#323232';
circle(ctx, FotakPodkladOdsazeniZleva + posunX, FotakPodkladOdsazeniZhora + posunY, FotakPodkladVelikost, true, false);

// fotak
ctx.fillStyle = '#151B54';
circle(ctx, FotakPodkladOdsazeniZleva + posunX, FotakPodkladOdsazeniZhora + posunY, FotakVelikost, true, false);

}


</script>


</body>
</html>