Road Sign Square: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| (18 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 == | |||
*[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: | [[File:roadsignsquare1.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 40. | ||
* The black square is 100, the line width is 16. | * The black square is 100, the line width is 16. | ||
| Line 29: | Line 32: | ||
ctx.lineTo(125,125); | ctx.lineTo(125,125); | ||
ctx.lineTo( 25,125); | ctx.lineTo( 25,125); | ||
ctx.closePath(); | |||
ctx.stroke(); | |||
} | |||
</pre> | |||
</div> | |||
== Get it right == | |||
<div class=qu data-width=160 data-height=160> | |||
*[https://napier.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=3473c81a-d972-4473-a1f6-ad89012085e6 Diversion Square Walkthrough 2] | |||
{{#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 black square is 100, the line width is 16. | |||
* The yellow is rgb(255,227,0) | |||
<pre class=usr> | |||
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(); | |||
} | |||
</pre> | |||
<pre class=ans> | |||
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.closePath(); | ||
ctx.stroke(); | ctx.stroke(); | ||
Latest revision as of 17:50, 4 September 2021
Road Sign Version 1
{{#ev:youtube|7H-BcvEBmZ8}}
- 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
{{#ev:youtube|p0BeX9rIltA}}
- 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();
}