Tìm kiếm
0398.259.259
Liên hệ
Blog
Kiến thức về website
Kiến thức SEO website
Kiến thức HTML
Kiến thức CSS
Kiến thức PHP
Kiến thức MySQL
Kiến thức JavaScript
Tên miền
Hosting
Thiết kế website
Giới thiệu
Trang chủ
Trang chủ
Giới thiệu
Thiết kế website
Hosting
Tên miền
Blog
Kiến thức về website
Kiến thức SEO website
Kiến thức HTML
Kiến thức CSS
Kiến thức PHP
Kiến thức MySQL
Kiến thức JavaScript
Liên hệ
0398.259.259
Thẻ canvas vẽ hình tròn trong HTML
Thẻ canvas vẽ hình tròn trong HTML
Thẻ canvas vẽ hình tròn trong HTML
Tự code rồi chạy thử...
Chạy Thử
<!DOCTYPE html> <html> <head> <title>Thẻ canvas vẽ hình tròn trong HTML</title> </head> <body> <!--Nếu trình duyệt không hỗ trợ canvas thì sẽ hiện đoạn chữ ở trong--> <!--Chiều rộng canvas phải gấp đôi chiều cao--> <canvas id="canvasid" style="border: 1px solid #000; width: 400px; height: 200px;" >Trình duyệt của bạn không hỗ trợ thẻ canvas HTML5.</canvas> <script> // Lấy id canvasid let canvasid = document.getElementById("canvasid"); // Lấy ngữ cảnh vẽ 2D let ctx = canvasid.getContext("2d"); // Vẽ hình tròn ctx.beginPath(); // Bắt đầu một đường dẫn mới ctx.arc(70, 50, 40, 0, 2 * Math.PI); // Vẽ một cung tròn với các tham số ctx.fillStyle = "blue"; // Chọn màu tô ctx.fill(); // Tô màu hình tròn // Bạn cũng có thể vẽ một đường viền ctx.lineWidth = 2; ctx.strokeStyle = "red"; ctx.stroke(); </script> </body> </html>
<!DOCTYPE html> <html> <head> <title>Thẻ canvas vẽ hình tròn trong HTML</title> </head> <body> <!--Nếu trình duyệt không hỗ trợ canvas thì sẽ hiện đoạn chữ ở trong--> <!--Chiều rộng canvas phải gấp đôi chiều cao--> <canvas id="canvasid" style="border: 1px solid #000; width: 400px; height: 200px;" >Trình duyệt của bạn không hỗ trợ thẻ canvas HTML5.</canvas> <script> // Lấy id canvasid let canvasid = document.getElementById("canvasid"); // Lấy ngữ cảnh vẽ 2D let ctx = canvasid.getContext("2d"); // Vẽ hình tròn ctx.beginPath(); // Bắt đầu một đường dẫn mới ctx.arc(70, 50, 40, 0, 2 * Math.PI); // Vẽ một cung tròn với các tham số ctx.fillStyle = "blue"; // Chọn màu tô ctx.fill(); // Tô màu hình tròn // Bạn cũng có thể vẽ một đường viền ctx.lineWidth = 2; ctx.strokeStyle = "red"; ctx.stroke(); </script> </body> </html>
Thẻ canvas vẽ hình tròn trong HTML
nằm trong bài viết
Thẻ canvas trong HTML
0398.259.259
Messenger
Chỉ Đường
Gọi điện
