[Bài 4]: HTML5 Canvas là gì? Cách vẽ HTML5 Canvas

Ở bài trước chúng ta đã tìm hiểu về các thuộc tính mới trong form và thẻ input. Trong bài hôm nay chúng ta sẽ tiếp tục tìm hiểu về một thành phần vô cùng thú vị trong HTML5 đó là HTML5 Canvas.

HTML5 Canvas là gì?

HTML5 Canvas là một thành phần giúp chúng ta  một cách dễ dàng và vô cùng mạnh mẽ để vẽ các đối tượng đồ họa bằng javascript.

Một thẻ Canvas chỉ có 2 thuộc tính là width và height cùng với các thuộc tính chính của HTML5 như id, class, name.

HTML5 Canvas

Vẽ đường thẳng

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Your browser does not support the canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");

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

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

</script>

Vẽ đường tròn

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Your browser does not support the canvas 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.stroke();

</script>

Vẽ chữ

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Your browser does not support the canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");

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

ctx.font = "30px Arial";

ctx.fillText("Hello World",10,50);

</script>

Tô viền chữ

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Your browser does not support the canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");

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

ctx.font = "30px Arial";

ctx.strokeText("Hello World",10,50);

</script>

Tô dãy màu

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Your browser does not support the 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>

Kết luận

Như vậy qua các tính năng của HTML5 Canvas chúng ta có thể vẽ ra những đối tượng hình ảnh cơ bản. Cảm ơn các bạn đã theo dõi bài giới thiệu Canvas , hy vọng sẽ giúp các bạn có cái nhìn tổng quát về Canvas hơn. Mong các bạn sẽ theo dõi Canvas trong một seri riêng sắp tới.