Road Sign Square: Difference between revisions
Jump to navigation
Jump to search
| Line 40: | Line 40: | ||
<div class=qu data-width=160 data-height=160> | <div class=qu data-width=160 data-height=160> | ||
[[File:roadsign2.png|border|Diversion Square]] | [[File:roadsign2.png|border|Diversion Square]] | ||
* The drawing surface is 160 | * 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. | ||
Revision as of 17:29, 19 August 2021
Road Sign Version 1
- 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)
{{#ev:youtube|7H-BcvEBmZ8}}
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 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.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();
}