Canvas

Vẽ cờ Nhật sử dụng HTML5 Canvas

Trong bài viết này tôi sẽ hướng dẫn bạn cách sử dụng HTML5 Canvas API để vẽ cờ Nhật Bản.

Trước tiên nếu bạn còn thắc mắc API là gì thì tôi xin được giải thích ngắn gọn như sau:

API là một bộ các quy tắc lập trình (viết mã lệnh) được thiết lập ra nhằm để giúp các ứng dụng tương tác được với nhau.

Nó giống như việc các nhà máy sản xuất ổ cắm điện và các nhà sản xuất dây cắm đồng ý với nhau về các quy tắc sản xuất để khi các sản phẩm này được tạo ra chúng có thể sử dụng tướng thích được với nhau.

Canvas xuất hiện trong API của phiên bản HTML5 giúp lập trình viên có thể sử dụng Javascript để làm việc với hình ảnh.

See the Pen pJMEMd by Hoc Lap Trinh (@hoclaptrinh) on CodePen.

Canvas giống như một chiếc bảng mà bạn có thể vẽ lên trên đó bất cứ thứ gì bạn muốn (sử dụng Javascript). Vì vậy bước đầu tiên bạn cần làm là tạo ra một thẻ Canvas trong HTML như dưới đây:

<canvas id="canvas" width="500" height="500"></canvas>

Để có thể bắt đầu vẽ bạn cần tạo ra một biến context:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

Để bắt đầu vẽ chúng ta sử dụng method beginPath của biến context mới tạo ra:

context.beginPath();

Để xác định diện tích hình tròn chúng ta gọi method arc, method này đòi hỏi bạn cung cấp giá trị cho tọa độ của tâm đường tròn, bán kính:

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

Cuối cùng fillStylefill lần lượt sẽ tô màu cho hình tròn và kết thúc quá trình vẽ:

context.fillStyle = '#FE0000';
context.fill();
Registration Login
Sign in with social account
or
Lost your Password?
Registration Login
Sign in with social account
or
A password will be send on your post
Registration Login
Registration