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
Kiến thức JQuery
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
Kiến thức JQuery
Liên hệ
Thiết Kế Website
Thẻ canvas vẽ hình vuông, chữ nhật trong HTML
Thẻ canvas vẽ hình vuông, chữ nhật trong HTML
Thẻ canvas vẽ hình vuông, chữ nhật trong HTML
Tự code rồi chạy thử...
Chạy Thử
<!DOCTYPE html> <html> <head> <title>Thẻ canvas vẽ hình vuông, chữ nhật trong HTML</title> </head> <body> <h1>Thẻ canvas vẽ hình vuông, chữ nhật trong HTML</h1> <p>Thẻ canvas trong HTML kết hợp với script để vẽ hình vuông, hình tròn, hình chữ nhật, đường thẳng, hình ảnh, văn bản,... lên chính nó:</p> <!--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"); //Hình chữ nhật ctx.fillStyle = "#FF0000"; //:left:5px;top:10px;width:100px;height:50px ctx.fillRect(5, 10, 100, 50); //Hình vuông ctx.fillStyle = "#FF0000"; //:left:5px;top:70px;width:50px;height:50px ctx.fillRect(5, 70, 50, 50); </script> </body> </html>
<!DOCTYPE html> <html> <head> <title>Thẻ canvas vẽ hình vuông, chữ nhật trong HTML</title> </head> <body> <h1>Thẻ canvas vẽ hình vuông, chữ nhật trong HTML</h1> <p>Thẻ canvas trong HTML kết hợp với script để vẽ hình vuông, hình tròn, hình chữ nhật, đường thẳng, hình ảnh, văn bản,... lên chính nó:</p> <!--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"); //Hình chữ nhật ctx.fillStyle = "#FF0000"; //:left:5px;top:10px;width:100px;height:50px ctx.fillRect(5, 10, 100, 50); //Hình vuông ctx.fillStyle = "#FF0000"; //:left:5px;top:70px;width:50px;height:50px ctx.fillRect(5, 70, 50, 50); </script> </body> </html>
Thẻ canvas vẽ hình vuông, chữ nhật trong HTML
nằm trong bài viết
Thẻ canvas trong HTML
Chỉ Đường
Gọi điện
