如何在Javascript中简单地添加/绘制三角形形状? - 这是为了绘制简单的房屋和耳朵等

时间:2017-03-28 16:28:00

标签: javascript drawing

到目前为止,这是我的javascript代码:

Javascript(sketch.js)

function setup(){

  createCanvas(500,500);
  a = 5;
}

function draw(){
  background(153,153,255);

    rectMode (CENTER);
fill (153,255,153);
rect (250,500,500,250);

  ellipseMode (CENTER);
fill (255,204,255);
ellipse (50,360,50,50);
point (40,360);
point (60,360);
fill (255,204,255);
ellipse (50,365,15,10);
fill (0,0,0);
ellipse (53,365,2,2);
fill (0,0,0);
ellipse (47,365,2,2);

fill (255,204,255);
ellipse (100,360,50,50);
point (90,360);
point (110,360);
fill (255,204,255);
ellipse (100,365,15,10);
fill (0,0,0);
ellipse (103,365,2,2);
fill (0,0,0);
ellipse (97,365,2,2);

fill (255,204,255);
ellipse (150,360,50,50);
point (140,360);
point (160,360);
fill (255,204,255);
ellipse (150,365,15,10);
fill (0,0,0);
ellipse (153,365,2,2);
fill (0,0,0);
ellipse (147,365,2,2);


  fill(255,255,255);
  text("W for the Wolf to appear, B to build the house, D to break the house, R to reset",10,30);

    if (a == 6)
  {

    rectMode (CENTER);
fill (255,255,160);
rect (350,305,200,140);
fill (255,100,100);
rect (350,340,40,70);
fill (204,255,255);
rect (290,290,45,45);
fill (204,255,255);
rect (410,290,45,45);

line (125,85,100,160);
line (175,85,200,160);

    ellipseMode (CENTER);
fill (255,255,0);
ellipse (337,343,5,5);


  }
}

function keyTyped()
{
  if (key == 'r')
  {
    a = 5;
  }
  if (key == 'b')
  {
    a = 6;
  }
}

我正在尝试创建一个程序来模拟3个小猪故事中的一部分。我的提示说:“你的程序必须有3头猪,一头狼,一座房子和一个破碎的房子。按下'w'按钮会使狼出现(默认情况下应该隐藏大的坏狼)。推'b'将建造或展示房屋。推'd'将显示破碎的房屋。最后推'r'将整个画布重置为默认,只有3只小猪。“

然而,我似乎无法在我的房子顶部找到一个三角形(制作屋顶),我想要一些类似于下图的内容:

http://images.clipartpanda.com/house-clipart-house-outline-clipart.jpg

如何在不改变代码风格的情况下以最简单的方式实现这种外观?

我还想在我的小猪的耳朵上添加三角形

ellipseMode (CENTER);
    fill (255,204,255);
    ellipse (50,360,50,50);
    point (40,360);
    point (60,360);
    fill (255,204,255);
    ellipse (50,365,15,10);
    fill (0,0,0);
    ellipse (53,365,2,2);
    fill (0,0,0);
    ellipse (47,365,2,2);

    fill (255,204,255);
    ellipse (100,360,50,50);
    point (90,360);
    point (110,360);
    fill (255,204,255);
    ellipse (100,365,15,10);
    fill (0,0,0);
    ellipse (103,365,2,2);
    fill (0,0,0);
    ellipse (97,365,2,2);

    fill (255,204,255);
    ellipse (150,360,50,50);
    point (140,360);
    point (160,360);
    fill (255,204,255);
    ellipse (150,365,15,10);
    fill (0,0,0);
    ellipse (153,365,2,2);
    fill (0,0,0);
    ellipse (147,365,2,2);

我现在所拥有的只是粉红色的圆圈,有小鼻子和眼睛;没有耳朵。

如果有人能帮我画一个类似这样的狼: https://img.clipartfest.com/4ea34496a765d209ccc7b8d7b641a454_big-bad-wolf-big-bad-wolf-clip-art_236-245.jpeg

那也很棒,谢谢!

0 个答案:

没有答案