The first lesson is canvas, showing a small case

There's not much work today , I have time to learn about canvas, By the way, I drew a “ Ding ” old man , It is hereby displayed , Just waiting for the public to have fun ！

It's not good ？？？？

Forget it , Hot eyes are hot eyes , Look at the code .

<canvas id="canvas" width="500" height="500"></canvas>

var canvas = document.getElementById("canvas");
			var context = canvas.getContext('2d');
            
            // First draw a head 
            context.beginPath();
            context.arc(250,250,50,0,Math.PI*2);
            context.stroke();
            
            // Draw two more ears 
            context.beginPath();
            context.arc(200,200,20,0,Math.PI*2);
            context.fill();
            context.beginPath();
            context.arc(300,200,20,0,Math.PI*2);
            context.fill();
            
            // Draw two more eyes 
            context.beginPath();
            context.arc(230,240,10,0,Math.PI*2);
            context.stroke();
            context.beginPath();
            context.arc(270,240,10,0,Math.PI*2);
            context.stroke();
            
            // Mend two eyes 
            context.beginPath();
            context.arc(230,240,2,0,Math.PI*2);
            context.fill();
            context.beginPath();
            context.arc(270,240,2,0,Math.PI*2);
            context.fill();
            
            // Draw another triangular nose 
            context.beginPath();
            context.moveTo(250,250);// Point a point in the canvas , Don't create lines 
            context.lineTo(240,260);// Add a new point , Then create a line from this point to the last specified point in the canvas （ This method does not create lines ）
            context.lineTo(260,260);// Add a new point , Then create a line from this point to the last specified point in the canvas （ This method does not create lines ）
            context.closePath();// The end point returns to the starting point 
            context.stroke();
            
            // Draw another mouth 
            context.beginPath();
            context.arc(250,270,15,0,Math.PI,false);
            context.stroke();

Look at this ,canvas It's still fun