I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

preface

The moon of 15 is 16 round, so it is normal to draw a full moon today. In this article, we will draw a moon on canvas with the mouse, because I am poor in front-end technology, so I will give a general idea. We need Mr. Wang to form a canvas as our canvas, and draw a suggestive circular pattern on it to indicate where the user should draw a large circle. Finally, calculate how the user draws the circle, see if the circle is not round.

The preparatory work

To draw a circle, we need a canvas with an array of points, and a paint bit to calculate whether the circle is being drawn.

    var pointArray = [];
    var cnv = document.getElementById('canvasPaper');
    var ctx = cnv.getContext('2d');
    var paint = false;
Copy the code

How to draw a circle with Canvas

Drawing a circle on a Canvas is relatively easy and can be done by using arc().

    // Start drawing paths
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#FFFFCC';
    // Draw the circle path **
    // Draw the circle arc(the abscissa of the center, the ordinate of the center, the length of the radius, the starting Angle of the drawing, the ending Angle of the drawing, whether counterclockwise)
    ctx.arc(100.100.50.0.Math.PI * 2.false);
    // Stroke path
    ctx.stroke();
    ctx.closePath();
    ctx.save();
Copy the code

As shown above, we have drawn a circular path with a radius of 50. Here, it is necessary to closePath CTX, otherwise the color of the circle will change in the subsequent drawing. For this path color, we use FFFFCC, which is lighter, to indicate the position of the moon.

Draw the moon

We need to listen on the mousedown, Mousemove, and mouseup methods of the mouse.

    $(cnv).mousedown(function (e) { ctx.beginPath(); paint = ! paint; ctx.strokeStyle ='#FFFF00';
        ctx.moveTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
    });


    $(cnv).mousemove(function (e) {
        ctx.strokeStyle = '#FFFF00';
        if (paint) {
            pointArray.push({"x": e.pageX - this.offsetLeft, "y": e.pageY - this.offsetTop});
            console.log(pointArray);
            ctx.lineTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop); ctx.stroke(); }}); $(cnv).mouseup(function (e) {
        ctx.strokeStyle = '#FFFF00'; paint = ! paint; ctx.closePath(); ctx.save(); });Copy the code

Note that the paint must be reversed after the mouseDown, so that the dots and colors can be drawn as the mouse moves, and the dots will be recorded as the mouse moves, and the moon will be completed and filled later. The color here is a darker yellow, which is more obvious.

Calculate whether the moon is round and fill in the colors

Calculate whether the moon is round by calculating the difference between the radius and the length of the point drawn from the center. Fill in the moon as you do your calculations.

    function calculate() {
        let totalPoint = 100;
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = "#FFFF00";
        for (let i = 0; i < pointArray.length; i++) {
            ctx.moveTo(100.100);
            ctx.lineTo(pointArray[i].x, pointArray[i].y);
            ctx.stroke();
            // Calculate the distance between the point and the center of the circle. Here is Pythagorean theorem.
            let lineLength = Math.sqrt(Math.pow(pointArray[i].x - 100.2) + Math.pow(pointArray[i].y - 100.2));
            totalPoint = totalPoint - Math.abs((50 - lineLength) * 0.01);
        }
        ctx.closePath();
        ctx.save();

        // Too few dots means you didn't try to draw well, fail!
        if (pointArray.length < 100) {
            totalPoint = 59;
        }
        alert("The integrity of your moon is." + totalPoint);
    }

Copy the code

Page code


<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body style="background-color: black">
<canvas id="canvasPaper" width="800" height="800"></canvas>
<input type="button" onclick="calculate()" value="Start counting"/>
<script>
// Fill in the code above
</script>
</body>
</html>

Copy the code

Finally, set a black background for the entire page and call it a day!