SHARE
TWEET

make your own jigglypuff

a guest Oct 17th, 2019 86 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function wb2_pg3_ex2() {
  2.     // use type information to make TypeScript happy
  3.     /** @type {HTMLCanvasElement} */
  4.     let canvas = (/** @type {HTMLCanvasElement} */ document.getElementById("canvas2"));
  5.  
  6.     // the student should fill in the rest...
  7.     let context = canvas.getContext('2d');
  8.    
  9.  
  10.     context.fillStyle = "pink";
  11.     context.strokeStyle = "black";
  12.     //context.lineWidth = 5;
  13.  
  14.     context.lineWidth = 6
  15.     context.beginPath();
  16.     context.lineTo(250, 175)
  17.     context.lineTo(400, 150)
  18.     context.lineTo(325, 250)
  19.     context.stroke();
  20.     context.fill();
  21.     context.closePath();
  22.  
  23.     context.beginPath();
  24.     context.lineTo(250, 175)
  25.     context.lineTo(100, 150)
  26.     context.lineTo(175, 250)
  27.     context.stroke();
  28.     context.fill();
  29.     context.closePath();
  30.  
  31.     context.fillStyle = "pink"
  32.  
  33.  
  34.     context.lineWidth = 3
  35.     context.beginPath()
  36.     context.lineTo(250,340);
  37.     context.lineTo(130, 340);
  38.     ///////////context.lineTo(375, 340);
  39.     //context.arc(375, 340, 55, Math.PI*1.5, Math.PI*0.5);
  40.     //context.lineTo(250, 340);
  41.     //context.arc(125, 340, 55, Math.PI*0.5, Math.PI*1.5);
  42.     context.arc(160,340,40,Math.PI*1, Math.PI*2)
  43.     context.fill();
  44.     context.stroke();
  45.     context.closePath();
  46.  
  47.  
  48.     context.beginPath()
  49.     context.lineTo(250,340);
  50.     context.lineTo(380, 340);
  51.     ///////////context.lineTo(375, 340);
  52.     //context.arc(375, 340, 55, Math.PI*1.5, Math.PI*0.5);
  53.     //context.lineTo(250, 340);
  54.     //context.arc(125, 340, 55, Math.PI*0.5, Math.PI*1.5);
  55.     context.arc(340,340,40,Math.PI*1, Math.PI*2)
  56.     context.fill();
  57.     context.stroke();
  58.     context.closePath();
  59.  
  60.  
  61.    
  62.    context.lineWidth = 3
  63.     context.beginPath();
  64.     context.arc(250, 250, 100, 0, Math.PI * 2);
  65.     context.fill();
  66.     context.stroke();
  67.     context.closePath();
  68.    
  69.  
  70.     context.beginPath()
  71.     context.fillStyle = "pink"
  72.     context.lineTo(250, 175)
  73.     context.lineTo(100, 150)
  74.     context.lineTo(175, 250)
  75.     //context.stroke();
  76.     context.fill();
  77.     context.closePath();
  78.  
  79.     context.beginPath();
  80.     context.lineTo(250, 175)
  81.     context.lineTo(400, 150)
  82.     context.lineTo(325, 250)
  83.     //context.stroke();
  84.     context.fill();
  85.     context.closePath();
  86.  
  87.  
  88.  
  89.     context.fillStyle = "brown"
  90.     context.beginPath()
  91.     context.lineTo(170, 175)
  92.     context.lineTo(125, 160)
  93.     context.lineTo(150, 200)
  94.     context.lineTo(170, 175)
  95.     //context.stroke();
  96.     context.fill();
  97.     context.closePath();
  98.  
  99.     context.beginPath
  100.     context.lineTo(330, 175)
  101.     context.lineTo(375, 160)
  102.     context.lineTo(350, 200)
  103.     context.lineTo(330, 175)
  104.     //context.stroke();
  105.     context.fill();
  106.     context.closePath();
  107.  
  108.     context.fillStyle = "pink";
  109.  
  110.     context.beginPath()
  111.     context.lineTo(125, 235);
  112.     context.lineTo(375, 235);
  113.     context.arc(375, 250, 15, Math.PI*1.5, Math.PI*0.5);
  114.     context.lineTo(250, 265);
  115.     context.arc(125, 250, 15, Math.PI*0.5, Math.PI*1.5);
  116.     context.fill();
  117.     context.stroke();
  118.     context.closePath();
  119.  
  120.     //context.rect()
  121.     context.beginPath()
  122.     context.fillRect(175,170,150,100)
  123.     context.closePath()
  124.  
  125.     context.beginPath()
  126.     let radius = 0;
  127.     let angle = 0;
  128.     for (var n = 0; n < 150; n++) {
  129.         radius += 0.5;
  130.         angle += (Math.PI * 2) / 50;
  131.         var x = canvas.width / 2 + radius * Math.cos(angle);
  132.         var y = canvas.height / 3 + radius * Math.sin(angle);
  133.         context.lineTo(x, y);
  134.     }
  135.     context.stroke()
  136.     context.fill()
  137.     context.closePath()
  138.  
  139.     context.beginPath()
  140.     radius = 0;
  141.     angle = 0;
  142.     for (var n = 0; n < 150; n++) {
  143.         radius += 0.50;
  144.         angle += (Math.PI * 2) / 50;
  145.         var x = canvas.width / 2 + radius * Math.cos(angle);
  146.         var y = canvas.height / 3 + radius * Math.sin(angle);
  147.         context.lineTo(x, y);
  148.     }
  149.     context.stroke();
  150.     //context.fill()
  151.     context.closePath();
  152.  
  153.    
  154.     //context.fillStyle = "red";
  155.     context.beginPath();
  156.     context.arc(250,290,20,Math.PI*1, Math.PI*2, true)
  157.     context.stroke();
  158.     //context.fill()
  159.     context.closePath();
  160.  
  161.     context.fillStyle = "white";
  162.     context.beginPath()
  163.     context.arc(210, 250, 30, 0, Math.PI * 2);
  164.     context.stroke();
  165.     context.fill();
  166.     context.closePath()
  167.  
  168.     context.fillStyle = "white";
  169.     context.beginPath()
  170.     context.arc(290, 250, 30, 0, Math.PI * 2);
  171.     context.stroke();
  172.     context.fill();
  173.     context.closePath()
  174.  
  175.     context.fillStyle =   `rgba(0,170,255,${(2)/4.0}`;
  176.     context.beginPath()
  177.     context.arc(290, 250, 20, 0, Math.PI * 2);
  178.     //context.stroke();
  179.     context.fill();
  180.     context.closePath()
  181.  
  182.  
  183.     //for(let x=0; x<4; x++) {
  184.       //  context.strokeStyle = `rgba(80,0,0,     ${(x+1)/4.0})`;
  185.         //context.fillStyle =   `rgba(255,170,170,${(x+1)/4.0}`;
  186.         //context.fillRect(40+x*50,30,30,180);
  187.         //context.strokeRect(40+x*50,30,30,180);
  188.     //}
  189.  
  190.     context.beginPath()
  191.     context.arc(210, 250, 20, 0, Math.PI * 2);
  192.     //context.stroke();
  193.     context.fill();
  194.     context.closePath()
  195.  
  196.  
  197.     // make some things to cover over
  198.  
  199.     /*
  200.     context33.lineWidth = 3;
  201.     context33.strokeStyle = "black";
  202.     context33.fillStyle = "darkgray";
  203.     context33.fillRect(20,40,220,20);
  204.     context33.strokeRect(20,40,220,20);
  205.  
  206.     context33.strokeStyle = "darkred";
  207.     context33.fillStyle = "lightpink";
  208.     context33.fillRect(20,80,220,20);
  209.     context33.strokeRect(20,80,220,20);
  210.  
  211.     context33.strokeStyle = "darkblue";
  212.     context33.fillStyle = "lightblue";
  213.     context33.fillRect(20,120,220,20);
  214.     context33.strokeRect(20,120,220,20);
  215.  
  216.     context33.strokeStyle = "darkgreen";
  217.     context33.fillStyle = "lightgreen";
  218.     context33.fillRect(20,160,220,20);
  219.     context33.strokeRect(20,160,220,20);
  220.  
  221.     for(let x=0; x<4; x++) {
  222.         context33.strokeStyle = `rgba(80,0,0,     ${(x+1)/4.0})`;
  223.         context33.fillStyle =   `rgba(255,170,170,${(x+1)/4.0}`;
  224.         context33.fillRect(40+x*50,30,30,180);
  225.         context33.strokeRect(40+x*50,30,30,180);
  226.     }
  227.     */
  228. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top