Canvas tag có chức năng để vẽ các biểu thị đồ họa cửa javascript
<canvas></canvas> được dùng để làm khung chứa các chi tiết đồ hoạ được vẽ bởi javascript, có thể được sử dụng để vẽ các hình khối , tròn, vuông , 3d hay biểu thị các biểu cảnh đang bay, hay có thể chèn chữ hay hình ảnh vào ben trong khung hình do được bọc bởi cặp thẻ <canvas></canvas>
Mình sẽ nếu ra một vài ví dụ sau đây cho các bạn thấy được và sẽ để lại đoạn code cho các bạn copy về và mở ra chỉnh thử nếu muốn.
Dưới đây là một biểu thị đồ họa được kết hợp bởi cặp thẻ <canvas></canvas> và được vẽ bởi cấu trúc đồ họa javascript,
Đây là biểu hình đồ họa được vẽ bởi sự kết hợp giữa cặp thẻ <canvas></canvas> và ngôn ngư javasacript
Đây là đoạn code được sử dụng để cấu hình ra một biểu hình đồ họa như trên
<canvas id="myCanvas" width="600" height="200" style="border:1px solid teal;background: LightYellow"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Cung tròn 1
ctx.beginPath();
ctx.arc(100, 100, 90, Math.PI, 0); // Tọa độ tâm (100,100), bán kính 90
ctx.strokeStyle = 'steelblue'; // Màu của đường
ctx.lineWidth = 5; //Độ rộng
ctx.stroke();
// Hình tròn
ctx.beginPath();
ctx.arc(300, 100, 90, 0, 2*Math.PI); // Tọa độ tâm (300,100), bán kính 90
ctx.strokeStyle = 'salmon' // Màu của đường
ctx.lineWidth = 3; //Độ rộng
ctx.stroke();
// Cung tròn 2
ctx.beginPath();
ctx.arc(500, 100, 90, 0, Math.PI); // Tọa độ tâm (500,100), bán kính 90
ctx.strokeStyle = 'seagreen'; // Màu của đường
ctx.lineWidth = 5; //Độ rộng
ctx.stroke();
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Cung tròn 1
ctx.beginPath();
ctx.arc(100, 100, 90, Math.PI, 0); // Tọa độ tâm (100,100), bán kính 90
ctx.strokeStyle = 'steelblue'; // Màu của đường
ctx.lineWidth = 5; //Độ rộng
ctx.stroke();
// Hình tròn
ctx.beginPath();
ctx.arc(100, 100, 90, 0, 2*Math.PI); // Tọa độ tâm (300,100), bán kính 90
ctx.strokeStyle = 'salmon' // Màu của đường
ctx.lineWidth = 3; //Độ rộng
ctx.stroke();
// Cung tròn 2
ctx.beginPath();
ctx.arc(300, 100, 90, 0, Math.PI); // Tọa độ tâm (500,100), bán kính 90
ctx.strokeStyle = 'seagreen'; // Màu của đường
ctx.lineWidth = 5; //Độ rộng
ctx.stroke();
</script>
0 Nhận xét