canvas画图（web作业）

通过canvas画图

效果图 canvas画图（web作业）

HTML代码


<html>
 <head>
  <script type="application/javascript">
    function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    // 房顶
    ctx.beginPath();
    ctx.moveTo(600, 100); //将“笔”移动到该坐标
    ctx.lineTo(400, 300);//画一条到该坐标的直线
    ctx.lineTo(800, 300);	
    ctx.fill();//将所有直线内部填充为黑色（默认填充颜色）
    
    // 房体
    ctx.fillRect(450, 300, 300, 250);//画一个从450,300坐标开始，宽为300，高为250的填充矩形

    // 左窗
    ctx.clearRect(500, 330, 50, 50);//檫去从500, 330坐标开始，宽高为50的矩形
    // 右窗
    ctx.clearRect(650, 330, 50, 50);
    
    // 门
    ctx.fillStyle = "rgb(255,255,255)";//设置填充颜色为白色
    ctx.beginPath();
    ctx.arc(600,460,50,0,Math.PI,true); //画一个以600,460为圆心，50为半径，以0弧度开始，逆时针旋转到，弧度为PI的半圆
    ctx.fill();
    ctx.clearRect(550, 460, 100, 85);
    ctx.fillStyle = "rgb(0,0,0)";
    ctx.fillRect(550,460, 100, 2);
  }
}
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="1000" height="1000"></canvas>
 </body>
</html>

*JS代码

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

canvas画图（web作业）

通过canvas画图

相关推荐