canvas中lineTo来画一个七巧板

安静仁
371 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

canvas继续学习中，记录学习历程。今天我学着用canvas来画一个七巧板，用刚刚学习的lineTo()属性来绘制七巧板。

绘制直线线段来 lineTo(x,y) 绘制点的坐标，同时配合fill()属性一起来绘制。话不多说，我们先看一下我们绘制的例子。我们学着绘制相似的图形

1670044562930.png

<canvas id="canvas" width="600" height="600" style="background-color:#f1f1f1 ;"></canvas>

下面开始我们的绘制

    let c1=document.getElementById('canvas');
    let ctx=c1.getContext('2d');
    //1.canvas定义宽高都是600，
    //2.把绘制的起点定在100,100 这个坐标上。
    //3.定义此七巧板是200*200
    //4.必须要使用beginPath和closePath这两个。
    
    1.我先绘制最上面橘黄色的大三角形。
    //我们的起点是坐标100,100，
     ctx.beginPath();
     ctx.moveTo(100,100);
     //三角形的右端坐标
     ctx.lineTo(300,100);
     //三角形的下面那个点的坐标。（这个坐标也是我们七巧板的中心坐标）
     ctx.lineTo(200,200);
     //填充为橘黄色
     ctx.fillStyle="orange";
     ctx.fill();
     ctx.closePath();

我们这样就看到一个橘黄色的大三角形出现了。下面我们继续绘制。

image.png

//开始绘制左侧青色的大三角形。

   ctx.beginPath();
   //我们把绘制的点移动到200,200 这个坐标上
   ctx.moveTo(200,200);
   //左侧三角形最下面那个点的坐标
   ctx.lineTo(100,300);
   //左侧三角形最上面的那个点
   ctx.lineTo(100,100)
   //填充为青色。
   ctx.fillStyle="#20896A";
   ctx.fill();
   ctx.closePath();

这样我们就把左侧的两个大三角形都绘制结束了。看一下效果。

image.png

现在我们开始绘制右侧的这些图形。我们先在最下面的黑色三角形开始。

    ctx.beginPath();
    //把点移动到黑色三角形最左侧的点
    ctx.moveTo(100,300)
    //绘制直线到右侧的坐标
    ctx.lineTo(200,300);
    //绘制直线到三角形最上面的那个点
    ctx.lineTo(150,250)
    //填充为黑色
    ctx.fillStyle='black';
    ctx.fill();
    ctx.closePath();

image.png

绘制小正方形

    ctx.beginPath();
    //把点移动到正方形最左边的这个点
    ctx.moveTo(150,250);
    //绘制直线到200,200 这个坐标点
    ctx.lineTo(200,200)
    //绘制直线到250,250这个坐标点
    ctx.lineTo(250,250);
    //绘制直线到200,300这个坐标点
    ctx.lineTo(200,300);
    //填充为黄色
    ctx.fillStyle="yellow";
    ctx.fill();
    ctx.closePath();

image.png

绘制正方形右侧的紫色的小三角形

  ctx.beginPath();
  //把点移动到200,200这个点
  ctx.moveTo(200,200);
  //绘制到250,150 三角形最上面的那个点
  ctx.lineTo(250,150);
  //绘制线段到250,250 三角形最下面的那个点
  ctx.lineTo(250,250);
  //填充为紫色
  ctx.fillStyle="purple";
  ctx.fill();
  ctx.closePath();

image.png

绘制右上角的平行四边形

  ctx.beginPath();
  //点移动到250,150 平行四边形左边上面的点
  ctx.moveTo(250,150);
  //绘制直线到右上侧的那个点
  ctx.lineTo(300,100);
  //绘制直线到300,200 这个点
  ctx.lineTo(300,200);
  //绘制线段到250,250这个点
  ctx.lineTo(250,250);
  //填充为蓝色
  ctx.fillStyle="blue";
  ctx.fill();
  ctx.closePath();

image.png

//我们下面绘制最右侧的三角形

  ctx.beginPath();
  //移动点到200,300的位置，三角形最左边的这个点
  ctx.moveTo(200,300);
  //绘制线段到300,300 最右侧的这个点
  ctx.lineTo(300,300);
  //绘制线段到三角形最右侧上面的那个点
  ctx.lineTo(300,200);
  ctx.fillStyle="red";
  ctx.fill();
  ctx.closePath();

我们最终的效果就是这样的

image.png

记录一下canvas学习的过程。

avatar
文章
阅读
粉丝