Tìm hiểu Canvas để vẽ các đối tượng đồ họa trong HTML5

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
13,593
Được Like
9,608
Tìm hiểu Canvas để vẽ các đối tượng đồ họa trong HTML5

Thẻ <canvas> sử dụng để vẽ các thành phần đồ họa từ đơn giản như các đường đến các đồ họa phức tạp. <canvas> chỉ có chức năng chứa các đối tượng đồ họa. Bạn bắt buộc phải sử dụng JavaScript để vẽ.

Phần tử <canvas> có cú pháp dạng:
Mã:
<canvas id="canvas1" width="200" height="100">
</canvas>

Mỗi phần tử <canvas> tạo ra bạn cần gán id cho nó để JavaScript truy cập đến. Để thực hiện vẽ trong <canvas> trước tiên cần lấy đối tượng bao bọc các lệnh vẽ và thuộc tính của canvas đó, đối tượng này gọi là context.

Ví dụ sau tạo ra một canvas và sử dụng JavaScript để lấy context
Mã:
<canvas id="canvas1" width="400" height="300"></canvas>

<script>
  var can = document.getElementById("canvas1");
  //Lấy context của canvas1
  var ctx = can.getContext("2d");
</script>

Tọa độ trong canvas
Canvas sử dụng lưới tọa độ 2 chiều, với góc trái phía trên là tọa độ gốc (0,0)

X : tọa độ theo phương ngang, tăng từ trái sang phải
Y : tọa độ theo phương đứng, tăng từ trên xuống dưới

toadocanvas-4206.png

Một số lệnh vẽ <canvas>
Các thao tác thiết lập và vẽ trong canvas được thực hiện thông qua đối tượng context lấy được của canvas

fillRect - Tô vẽ hình chữ nhật
Hàm fillRect(x, y, w, h) tô một hình chữ nhật từ rộng w cao h với tọa độ góc trái - trên là (x, y). Nó sử dụng màu tô mặc định là màu đen
Mã:
<canvas id="canvasexample" width="300" height="200"
    style="background: whitesmoke;">   
</canvas>

<script>
    var c=document.getElementById("canvasexample");
    
    //Lấy context
    var ctx=c.getContext("2d");
    ctx.fillRect(20,20,100,100);

</script>

tải xuống.png

Để thay đổi màu tô, mẫu tô sử dụng thuộc tính fillStyle của context để thiết lập trước khi vẽ

Ví dụ đổi màu tô với fillStyle
Mã:
<canvas id="canvasexample1" width="300" height="200"
        style="background: whitesmoke;">
</canvas>

<script>
    var c=document.getElementById("canvasexample1");

    var ctx=c.getContext("2d");
    ctx.fillStyle ="#4CAF50";
    ctx.fillRect(20,20,100,100);

</script>

tải xuống (1).png

Bạn cũng có thể sử dụng createLinearGradient, createRadialGradient để tạo Gradient cho màu tô, hay createPattern tạo mẫu tô từ ảnh rồi gán cho fillStyle

Vẽ đường thẳng với lệnh moveTo và lineTo
  • moveTo(x1,y1) : Di chuyển tới điểm (x1,y1)
  • lineTo(x2,y2) : Kẻ đường tới điểm (x2,y2)
Thường để vẽ các đường đầu tiên gọi beginPath() để khởi tạo một path mới (nó chứa tập hợp các lệnh đường cần vẽ). Cuối cùng để thực hiện vẽ tập đó gọi hàm stroke()
Mã:
<canvas id="linecanvas" width="500" height="200"></canvas>

<script>
    var canvas = document.getElementById('linecanvas');
    var ctx = canvas.getContext('2d');

    // Đường thứ nhất
    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    ctx.moveTo(20,20);
    ctx.lineTo(200,20);
    ctx.stroke();

    // Đường thứ 2
    ctx.beginPath();
    ctx.strokeStyle = 'green';//Đặt màu đường
    ctx.lineWidth = 5; //Độ rộng

    ctx.moveTo(20,20);
    ctx.lineTo(120, 120);
    ctx.stroke();
</script>

tải xuống (2).png

Vẽ cung tròn - hình tròn với arc
Lệnh vẽ cung tròn, hình tròn: arc(x,y,r,start,stop)
  • x, y : tọa độ tâm
  • r bán kính
  • start góc bắt đầu vẽ
  • stop góc kết thúc vẽ
Mã:
<canvas id="arcexmaple"
    width="600" height="110"
    style="background: whitesmoke;">
    
</canvas>

<script>
    var canvas = document.getElementById('arcexmaple');
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.arc(100, 55, 50, 0, 2*Math.PI);
    ctx.stroke();


    ctx.beginPath();
    ctx.arc(210, 55, 50, 0, Math.PI);
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 5; //Độ rộng
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(320, 55, 50, Math.PI, 0);
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 5; //Độ rộng
    ctx.stroke();


</script>

tải xuống (3).png

Vẽ chữ trong canvas - font, fillText, strokeText
  • context.font : thiết lập font chữ
  • fillText(text,x,y) : tô chữ từ tọa độ x,y
  • strokeText(text,x,y) : vẽ chữ (không tô đặc)
Mã:
<canvas id="textcanvas" width="600" height="110"
style="background: whitesmoke;"></canvas>

<script>
    var ctx = document.getElementById('textcanvas').getContext('2d');

    ctx.font = '48px serif';

    ctx.fillStyle = 'red';
    ctx.fillText('Hello world', 100, 50);

    ctx.strokeStyle = 'green';
    ctx.strokeText('Hello world', 100, 100);

</script>

tải xuống (4).png

Thay đổi tọa độ canvas
Trong canvas bạn có thể dịch chuyển tọa độ để vẽ theo tọa độ tương đối bằng các hàm: translate, rotate, scale
  • context.translate(x, y) : dịch chuyển gốc tọa độ đến điểm x, y
  • context.rotate(ang) : quay hệ tọa độ một góc ang quanh gốc
  • context.scale(sx, sy) : thu phóng tọa độ chiều x và chiều y
Ví dụ sau vẽ chữ trong context, sau đó dịch chuyển tọa độ, quay tọa độ, rồi thu phóng và vẽ lại chữ để xem kết quả:
Mã:
<canvas id="canvascoor" width="600" height="110"
style="background: whitesmoke;"></canvas>
<script>
    var ctx = document.getElementById('canvascoor').getContext('2d');

    ctx.font = '48px serif';
    ctx.fillStyle = 'red';
    ctx.fillText('Hello world', 20, 50);

    ctx.translate(300, 100);
    ctx.rotate(- Math.PI/4);
    ctx.scale(0.5, 0.3);

    ctx.fillText('Hello world', 0, 0);



</script>

tải xuống (5).png

Chúc các bạn thành công.


Nguồn: Internet​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hosting Giá rẻ

hosting free
hosting free
Top Bottom