A different version of the Japanese flag (the rising sun) using canvas-CodePudding

There are lots of hints on how to create the flag of Japan using only CSS/HTML. It is possible, with canvas to recreate the Rising Sun. It isn't an exact replica, but you get the idea of how to use canvas to create the image you want.

Code below

CodePudding user response：

<!DOCTYPE html>
<html>
<body>

<canvas id="Canvas1" width="200" height="100" style="position: absolute; left: 1; border:1px solid #333; background-color: #Fff;box-shadow: 5px 5px 10px #666;"></canvas>

<canvas id="Canvas2" width="200" height="100" style="position: absolute; left: 1; border:1px solid #333; backgroundL transparent;"></canvas>


<script>
var c = document.getElementById("Canvas1");
var ct1 = c.getContext("2d");
var d = document.getElementById("Canvas2");
var ct2 = d.getContext("2d");
ct1.moveTo(0,50);
ct1.lineTo(100,100)
ct1.lineTo(0,80);
ct1.lineTo(0,50);
ct1.closePath();
ct1.fillStyle = "#ff0000";
ct1.fill(); 
ct1.moveTo(50,0);
ct1.lineTo(100,100)
ct1.lineTo(80,0);
ct1.lineTo(50,0);
ct1.closePath();
ct1.fillStyle = "#ff0000";
ct1.fill(); 
ct1.moveTo(20,0);
ct1.lineTo(100,100)
ct1.lineTo(0,20);
ct1.lineTo(0,0);
ct1.lineTo(20,0);
ct1.closePath();
ct1.fillStyle = "#ff0000";
ct1.fill(); 
ct1.moveTo(110,0);
ct1.lineTo(100,100)
ct1.lineTo(140,0);
ct1.lineTo(110,0);
ct1.closePath();
ct1.fillStyle = "#ff0000";
ct1.fill(); 
ct1.moveTo(170,0);
ct1.lineTo(100,100)
ct1.lineTo(200,20);
ct1.lineTo(200,0);
ct1.lineTo(170,0);
ct1.closePath();
ct1.fillStyle = "#ff0000";
ct1.fill(); 
ct1.moveTo(200,50);
ct1.lineTo(100,100)
ct1.lineTo(200,80);
ct1.lineTo(200,50);
ct1.closePath();
ct1.fillStyle = "#ff0000";
ct1.fill(); 
ct1.moveTo(75,75);

ct2.beginPath();
ct2.arc(100, 100, 30, 0.5 * Math.PI, 2*Math.PI);
ct2.closePath();
ct2.stroke();
ct2.fillStyle = "#ff0000";
ct2.fill(); 






ct1.stroke();


</script>

</body>
</html>

CodePudding user response：

Creating dynamic shapes.

The best thing about programming is that you can give the code smarts. You have hard coded all the lines and arcs. If you need to make changes it would require some effort.

Example

The snippet does about the same thing but lets you dynamically set the ray count, circle radius, colors, and inner and outer ray width. It is also scaled to the canvas diagonal so will fit any canvas size and aspect ratio (as long as there are some pixels).

Use the sliders to change the various settings.

var W = canvas.width, H = canvas.height;
const ctx = canvas.getContext("2d");
render();
// sunRadius as fraction of canvas diagonal
function drawStyleSun(sunRadius, rayCount, rayRatio, outerRayRatio, bgCol, sunCol) {
    const maxRadius = Math.hypot(W, H) * 0.5;  // half canvas diagonal 
    sunRadius *= maxRadius;
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.fillStyle = bgCol;
    ctx.fillRect(0, 0, W, H)
    ctx.setTransform(1, 0, 0, 1, W * 0.5, H  * 0.5);
    ctx.fillStyle = sunCol;
    const rayStep = Math.PI * 2 / rayCount;
    const rayWidth = rayStep * rayRatio * 0.5;
    const rayOuterWidth = rayStep * outerRayRatio * 0.5;
    const bgWidth = rayStep * (1 - rayRatio);
    ctx.beginPath();
    var top = -Math.PI * 0.5;  // start at top ray
    while (rayCount-- > 0) {
        ctx.arc(0, 0, maxRadius, top - rayOuterWidth, top   rayOuterWidth);
        ctx.arc(0, 0, sunRadius, top   rayWidth, top   rayWidth   bgWidth);
        top  = rayStep;
    }
    ctx.fill();
    
}
function render() {
    drawStyleSun(radiusEl.value, rayCountEl.value | 0, rayRatioEl.value, outerRayRatioEl.value, "green", "gold");
}
rayCountEl.addEventListener("input", render);
radiusEl.addEventListener("input", render);
rayRatioEl.addEventListener("input", render);
outerRayRatioEl.addEventListener("input", render);

* {font-family: arial; font-size: small;}
canvas { position : absolute; top : 00px; left : 200px; box-shadow: 5px 5px 10px #666;"}

<lable for="rayCountEl">Rays...</label>
<input id ="rayCountEl" type="range" min=2 max=26 step=1 value=16></br>
<lable for="radiusEl">Radius</label>
<input id ="radiusEl" type="range" min=0.01 max=0.5 step=0.01 value=0.1></br>
<lable for="rayRatioEl">Ratio..</label>
<input id ="rayRatioEl" type="range" min=0.01 max=0.99 step=0.01 value=0.5></br>
<lable for="outerRayRatioEl">Ratio..</label>
<input id ="outerRayRatioEl" type="range" min=0.01 max=0.99 step=0.01 value=0.5></br>
<canvas id="canvas" width="270" height="180"></canvas>

_{Note: Using AU colour scheme}