Difference between revisions of "Road Sign Square"

From ProgZoo
Jump to navigation Jump to search
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
<pre id='shellbody' data-qtp='canvas'></pre>
<pre id='shellbody' data-qtp='canvas'></pre>
== Road Sign Version 1 ==
== Road Sign Version 1 ==
*[https://napier.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=fc09379c-3273-4ad4-89e4-ad89011785d8 Diversion Square Walkthrough 1]
{{#ev:youtube|7H-BcvEBmZ8}}
<div class=qu data-width=150 data-height=150>
<div class=qu data-width=150 data-height=150>
[[File:roadsignsquare1.png|border|Diversion Square]]
[[File:roadsignsquare1.png|border|Diversion Square]]
Line 6: Line 8:
* 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)
{{#ev:https://youtube.com?watch=7H-BcvEBmZ8}}
<pre class=usr>
<pre class=usr>
function drawFlag(ctx){
function drawFlag(ctx){
Line 36: Line 37:
</pre>
</pre>
</div>
</div>


== Get it right ==
== Get it right ==
<div class=qu data-width=160 data-height=160>
<div class=qu data-width=160 data-height=160>
[[File:roadsignsquare.png|border|Diversion Square]]
*[https://napier.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=3473c81a-d972-4473-a1f6-ad89012085e6 Diversion Square Walkthrough 2]
* The drawing surface is 160 y 160
{{#ev:youtube|p0BeX9rIltA}}
[[File:roadsign2.png|border|Diversion Square]]
* The drawing surface is 160 by 160
* The yellow square has side 150, the radius of the corner is 20.
* 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.
Line 47: Line 51:
function drawFlag(ctx){
function drawFlag(ctx){
   ctx.fillStyle = 'rgb(255,227,0)';
   ctx.fillStyle = 'rgb(255,227,0)';
   ctx.fillRect(0,0,150,150);
   ctx.lineWidth = 2;
  ctx.strokeStyle = 'black';
  ctx.translate(80,80);
  ctx.moveTo(-55,-75);
  ctx.lineTo(55,-75);
  ctx.arc(55,-55, 20, -Math.PI/2, 0);
  ctx.rotate(Math.PI/2);
  ctx.lineTo(55,-75);
  ctx.arc(55,-55, 20, -Math.PI/2, 0);
  ctx.rotate(Math.PI/2);
  ctx.lineTo(55,-75);
  ctx.arc(55,-55, 20, -Math.PI/2, 0);
  ctx.rotate(Math.PI/2);
  ctx.lineTo(55,-75);
  ctx.arc(55,-55, 20, -Math.PI/2, 0);
  ctx.rotate(Math.PI/2);
  ctx.stroke();
  ctx.fill();
  ctx.beginPath();
   ctx.lineWidth = 16;
   ctx.lineWidth = 16;
  ctx.strokeStyle = 'black';
   ctx.moveTo(50,50);
   ctx.moveTo( 25, 25);
   ctx.lineTo(50,-50);
   ctx.lineTo(125, 25);
   ctx.lineTo(-50,-50);
   ctx.lineTo(125,125);
   ctx.lineTo(-50,50);
   ctx.lineTo( 25,125);
   ctx.closePath();
   ctx.closePath();
   ctx.stroke();
   ctx.stroke();
}
}
</pre>
</pre>
<pre class=ans>
<pre class=ans>
function drawFlag(ctx){
function drawFlag(ctx){
  ctx.translate(80,80);
   ctx.fillStyle = 'rgb(255,227,0)';
   ctx.fillStyle = 'rgb(255,227,0)';
   ctx.fillRect(0,0,150,150);
   ctx.strokeStyle = 'black';
  ctx.moveTo(55,-75);
  ctx.arc(55,-55,20,-Math.PI/2,0 );
  ctx.lineTo(75,55);
  ctx.rotate(Math.PI/2);
  ctx.arc(55,-55,20,-Math.PI/2,0 );
  ctx.lineTo(75,55);
  ctx.rotate(Math.PI/2);
  ctx.arc(55,-55,20,-Math.PI/2,0 );
  ctx.lineTo(75,55);
  ctx.rotate(Math.PI/2);
  ctx.arc(55,-55,20,-Math.PI/2,0 );
  ctx.lineTo(75,55);
  ctx.rotate(Math.PI/2);
  ctx.fill();
  ctx.stroke();
  ctx.beginPath();
   ctx.lineWidth = 16;
   ctx.lineWidth = 16;
  ctx.strokeStyle = 'black';
   ctx.moveTo(50,50);
   ctx.moveTo( 25, 25);
   ctx.lineTo(50,-50);
   ctx.lineTo(125, 25);
   ctx.lineTo(-50,-50);
   ctx.lineTo(125,125);
   ctx.lineTo(-50,50);
   ctx.lineTo( 25,125);
   ctx.closePath();
   ctx.closePath();
   ctx.stroke();
   ctx.stroke();

Latest revision as of 17:50, 4 September 2021


Road Sign Version 1

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 drawing surface is 160 by 160
  • 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.lineWidth = 2;
  ctx.strokeStyle = 'black';
  ctx.translate(80,80);
  ctx.moveTo(-55,-75);
  ctx.lineTo(55,-75);
  ctx.arc(55,-55, 20, -Math.PI/2, 0);
  ctx.rotate(Math.PI/2);
  ctx.lineTo(55,-75);
  ctx.arc(55,-55, 20, -Math.PI/2, 0);
  ctx.rotate(Math.PI/2);
  ctx.lineTo(55,-75);
  ctx.arc(55,-55, 20, -Math.PI/2, 0);
  ctx.rotate(Math.PI/2);
  ctx.lineTo(55,-75);
  ctx.arc(55,-55, 20, -Math.PI/2, 0);
  ctx.rotate(Math.PI/2);
  ctx.stroke();
  ctx.fill();
  ctx.beginPath();
  ctx.lineWidth = 16;
  ctx.moveTo(50,50);
  ctx.lineTo(50,-50);
  ctx.lineTo(-50,-50);
  ctx.lineTo(-50,50);
  ctx.closePath();
  ctx.stroke();
}

function drawFlag(ctx){
  ctx.translate(80,80);
  ctx.fillStyle = 'rgb(255,227,0)';
  ctx.strokeStyle = 'black';
  ctx.moveTo(55,-75);
  ctx.arc(55,-55,20,-Math.PI/2,0 );
  ctx.lineTo(75,55);
  ctx.rotate(Math.PI/2);
  ctx.arc(55,-55,20,-Math.PI/2,0 );
  ctx.lineTo(75,55);
  ctx.rotate(Math.PI/2);
  ctx.arc(55,-55,20,-Math.PI/2,0 );
  ctx.lineTo(75,55);
  ctx.rotate(Math.PI/2);
  ctx.arc(55,-55,20,-Math.PI/2,0 );
  ctx.lineTo(75,55);
  ctx.rotate(Math.PI/2);
  ctx.fill();
  ctx.stroke();
  ctx.beginPath();
  ctx.lineWidth = 16;
  ctx.moveTo(50,50);
  ctx.lineTo(50,-50);
  ctx.lineTo(-50,-50);
  ctx.lineTo(-50,50);
  ctx.closePath();
  ctx.stroke();
}