截图如下：
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Drawing house</title> 7 </head> 8 <body> 9 <canvas id="myCanvas" width="650" height="550" style="border:1px solid"></canvas> 10 <script> 11 var c = document.getElementById("myCanvas"); 12 var ctx = c.getContext("2d"); 13 ctx.fillStyle = "#9FFFFFFF"; 14 ctx.fillRect(25,275,600,250); 15 16 // Draw triangle 17 ctx.fillStyle="#FFFFDBFF"; 18 ctx.beginPath(); 19 ctx.moveTo(325,25); 20 ctx.lineTo(25,275); 21 ctx.lineTo(635,275); 22 ctx.closePath(); 23 ctx.fill(); 24 25 //windows 26 ctx.fillStyle="#FF7FEDFF"; 27 ctx.fillRect(50,400,200,100); 28 ctx.fillStyle="#FFD800FF"; 29 ctx.fillRect(52,402,96,46); 30 ctx.fillRect(152,402,96,46); 31 ctx.fillRect(52,452,96,46); 32 ctx.fillRect(152,452,96,46); 33 34 //door 35 ctx.fillStyle = "#754719"; 36 ctx.fillRect(300,375,100,150); 37 38 //door knob 39 ctx.beginPath(); 40 ctx.fillStyle = "#F2F2F2"; 41 ctx.arc(325,400,3,0,2*Math.PI); 42 ctx.fill(); 43 ctx.closePath(); 44 45 //Text on the Right 46 ctx.font="40px Veranda"; 47 ctx.fillText("Hello",425,350); 48 ctx.font="30px Veranda"; 49 ctx.fillText("LiuWei",425,390); 50 ctx.fillText("Canvas",425,420); 51 </script> 52 </body> 53 </html>