Difference between revisions of "Road Sign Square"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
<pre id='shellbody' data-qtp='canvas'></pre> | <pre id='shellbody' data-qtp='canvas'></pre> | ||
== Almost == | |||
<div class=qu data-width=150 data-height=150> | |||
[[File:roadsignsquare.png|border|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) | |||
<pre class=usr> | |||
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(); | |||
} | |||
</pre> | |||
<pre class=ans> | |||
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(); | |||
} | |||
</pre> | |||
</div> | |||
== Get it right == | |||
<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]] | ||
Revision as of 23:06, 18 August 2021
Almost
- 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
- 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();
}