Difference between revisions of "Road Sign Square"

From ProgZoo
Jump to navigation Jump to search
Line 39: Line 39:
<div class=qu data-width=150 data-height=150>
<div class=qu data-width=150 data-height=150>
[[File:roadsignsquare.png|border|Diversion Square]]
[[File:roadsignsquare.png|border|Diversion Square]]
* The yellow square has side 150, the radius of the corner is 40.
* The yellow square has side 150, the radius of the corner is 20.
* The black square is 100, the line width is 16.
* The black square is 100, the line width is 16.
* The yellow is rgb(255,227,0)
* The yellow is rgb(255,227,0)

Revision as of 23:15, 18 August 2021


Almost

Diversion Square

  • The yellow square has side 150, the radius of the corner is 40.
  • The black square is 100, the line width is 16.
  • The yellow is rgb(255,227,0)
function drawFlag(ctx){
  ctx.fillStyle = 'rgb(255,227,0)';
  ctx.fillRect(0,0,150,150);
  ctx.lineWidth = 16;
  ctx.strokeStyle = 'black';
  ctx.moveTo( 25, 25);
  ctx.lineTo(125, 25);
  ctx.lineTo(125,125);
  ctx.lineTo( 25,125);
  ctx.closePath();
  ctx.stroke();
}
function drawFlag(ctx){
  ctx.fillStyle = 'rgb(255,227,0)';
  ctx.fillRect(0,0,150,150);
  ctx.lineWidth = 16;
  ctx.strokeStyle = 'black';
  ctx.moveTo( 25, 25);
  ctx.lineTo(125, 25);
  ctx.lineTo(125,125);
  ctx.lineTo( 25,125);
  ctx.closePath();
  ctx.stroke();
}

Get it right

Diversion Square

  • The yellow square has side 150, the radius of the corner is 20.
  • The black square is 100, the line width is 16.
  • The yellow is rgb(255,227,0)
function drawFlag(ctx){
  ctx.fillStyle = 'rgb(255,227,0)';
  ctx.fillRect(0,0,150,150);
  ctx.lineWidth = 16;
  ctx.strokeStyle = 'black';
  ctx.moveTo( 25, 25);
  ctx.lineTo(125, 25);
  ctx.lineTo(125,125);
  ctx.lineTo( 25,125);
  ctx.closePath();
  ctx.stroke();
}
function drawFlag(ctx){
  ctx.fillStyle = 'rgb(255,227,0)';
  ctx.fillRect(0,0,150,150);
  ctx.lineWidth = 16;
  ctx.strokeStyle = 'black';
  ctx.moveTo( 25, 25);
  ctx.lineTo(125, 25);
  ctx.lineTo(125,125);
  ctx.lineTo( 25,125);
  ctx.closePath();
  ctx.stroke();
}