Canvas có nhiều phương thức để vẽ, đường thẳng, hình hộp, hình tròn, văn bản, và thêm ảnh.
Ví dụ về Canvas
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Trình duyệt của bạn không hỗ trợ canvas.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
Canvas là một vùng hình chữ nhật trên trang HTML. Mặc định thì canvas không có viền và nội dung.
Ví dụ về Canvas
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
Canvas là một vùng hình chữ nhật trên trang HTML. Mặc định thì canvas không có viền và nội dung.
Ví dụ về Canvas
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
Canvas là một vùng hình chữ nhật trên trang HTML. Mặc định thì canvas không có viền và nội dung.
Ví dụ về Canvas
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Canvas là một vùng hình chữ nhật trên trang HTML. Mặc định thì canvas không có viền và nội dung.
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);
Cú pháp như sau:
Ví dụ về Canvas
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);
Canvas là một vùng hình chữ nhật trên trang HTML. Mặc định thì canvas không có viền và nội dung.
Ví dụ về Canvas
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
<script>
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
}
</script>
</body>
</html>
Canvas là một vùng hình chữ nhật trên trang HTML. Mặc định thì canvas không có viền và nội dung.
Với việc sử dụng thư viện 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);3, ta đã có thêm một tùy chọn nữa trong việc vẽ đồ thị, hình động hoặc cao hơn là viết các game nhỏ.
Cám ơn các bạn đã đọc bài viết của mình và mong rằng chúng ta sẽ có những trao đổi hữu ích thông qua bài viết này.
Tham Khảo
HTML5 Canvas Tutorial: An Introduction
Mozilla Develop Network
Vẽ hình tròn
1. HTML5 Canvas là gì?#
Canvas là một phần tử của HTML5, cho phép thực hiện lập trình kết xuất đồ họa các đối tượng hai chiều trên trang web. Canvas chiếm một khu vực trong trang web với chiều rộng và chiều cao định trước. Sau đó sử dụng Javascript có thể truy cập vào khu vực này để vẽ thông qua một tập các hàm đồ họa tương tự như các API 2D khác.
2. Tại sao lại dùng Canvas?#
Bởi vì Canvas có thể giúp hiển thị trực quan một số hình ảnh dễ dàng trên trình duyệt như:
Các sơ đồ đơn giản
Trang trí thêm cho giao diện người dùng
Hình ảnh động
Biểu đồ và đồ thị
<canvasid="exampleCanvas"width="500"height="300"><!-- OPTION 1: leave a message here if browser doesn't support canvas --><p>Your browser doesn’t currently support HTML5 Canvas.
Please check caniuse.com/#feat=canvas for information on
browser support for canvas.</p><!-- OPTION 2: put fallback content (text, image, Flash, etc.)
if the browser doesn't support canvas --></canvas>
Sử dụng Canvas không khó nhưng bạn cần có 1 ít kiến thức về Html và Javascript. Một số trình duyệt cũ không hỗ trợ canvas, bạn nên sử dụng Firefox 1.5 trở về sau, Opera 9 hoặc phiên bản mới hơn… Bạn có thể tham khảo thêm tại đây: http://caniuse.com/canvas
Canvas chiếm một khu vực hình chữ nhật trên trang web mà kích thước của hình chữ nhật được quy định bởi nó. Lưu ý: Mặc định thẻ canvas sẽ không có đường viền và nội dung rỗng.
