BELAJAR KODE HTML CANVAS

                                                                 CARA BUAT CANVAS

 Oc langsung aja bagi anda yang ingin tahu bagaimana cara buat canvas di wb ni Tp beri tahu sedikit tipsnya...oc langsung di simak... :)
contoh :
your browwser does not support the HTML5 canvas tag.

ini kodenya :...


<canvas 100="100" id="mycanvas" style="border: 1px solid #c3c3c3;" width="200 height=">your browwser does not support the HTML5 canvas tag.</canvas>

<script>

var
c=document.getElementById("mycanvas">;
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0.200,100);

</script>




Cara menarik garis dalam canvas :
your browser does not support the HTML canvas tag.



ini kodenya :


<canvas heiht="100" id="mycanvas" style="border: 1px solid#d3d3d3;" width="200">your browser does not support the HTML canvas tag.</canvas>

<script>

vaar
c=document.getElementById("mycanvas");
var ctx.=c.getContext("2d);
ctx.moveto(0,0);
ctx.lineto(200,100);
ctx.stroke();

</script>


Cara buat lingkaran dalam kanvas :
contoh :
your browser dost not support the HTML5 tag



ini kodenya :


<canvas height="100" id="mycanvas" style="border: 1px solid#d3d3d3;" width="200">your browser does not support the HTML5 tag</canvas>

<script>

var
c=document.getElementById("mycanvas");
var ctx=c.getcontext("2d");
ctx.beginpath();
ctx.arc(95,50,40,0,2*math.PI);
ctx.arcstroke();

</script>

Cara memasukan text penuh pada canvas :
contoh :
your browser does not support HTML5 tag.

ini kodenya :

<canvas height="100" id="mycanvas" style="border: 1px solid#d3d3d3;" width="200">your browser does not support HTML5 tag.</canvas>

<script>

var
c=document.getElementById("mycanvas");
var ctx=c.getcontext("2d");
ctx.font="30px Arial";
ctx.filltext("Tempat Pencarian",10,50);

</script>


Cara buat textkosong dalam canvas.
contoh :
your browser does not support HTML5 tag.


ini kodenya :

<canvas id="mycanvas" width"200" height"100" style="border:1px solid#d3d3d3;">your browser does not support HTML5 tag.</canvas>

<script>

var
c=document.getElementById("mycanvas");
var ctx=c.getcontext("2d");
ctx.font="30px Arial";
ctx.stroketext("Tempat Pencarian",10,50);
</script>

Cara buat gradien linier dalam canvas.
contoh :


Your browser does not support the HTML5 canvas tag.


ini kodenya :


<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

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

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

</script>

Cara buat gradien radial dalam canvas.
contoh :

Your browser does not support the HTML5 canvas tag.

ini kodenya :

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

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

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

</script>