Canvas 2: The beauty of curves

There is only one kind of heroism

Is to look at life as it really is and still love it

“This article has participated in the call for good writing activities, click to view: the back end, the big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!”

The advantage of learning is that it can let us step on the pit less, this is not yesterday’s problem today found another solution:

MoveTo (x, y) moves the pen to the specified coordinates X and Y

Practice 1

// Draw a smiling face
    function draw2() {
      var canvas=document.getElementById('canvas2');
      if(canvas.getContext) {
        var ctx=canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(75.75.50.0.Math.PI*2.true); / / to draw
        ctx.moveTo(110.75); // Move the stroke to the specified coordinates.
        ctx.arc(75.75.35.0.Math.PI,false);   // Mouth (clockwise)
        ctx.moveTo(65.65);
        ctx.arc(60.65.5.0.Math.PI*2.true);  / / the left eye
        ctx.moveTo(95.65);
        ctx.arc(90.65.5.0.Math.PI*2.true);  / / in the right eyectx.stroke(); }}Copy the code

Actual combat 2

Even the steel straight man has a romantic heart, not to say overtime for romance, directly to a quick little love. You’ve heard of bezier curves, you can do whatever you want, just go to code.

function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // Ctx.beginPath (); ctx.moveTo(75, 40); ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); CTX. BezierCurveTo (20, 25, 20, 62.5, 20, 62.5); ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); CTX. BezierCurveTo (110, 102, 130, 80, 130, 62.5); CTX. BezierCurveTo (130, 62.5, 130, 25, 100, 25); ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); ctx.fillStyle="red"; ctx.fill(); }}Copy the code

Refer to the link

pomax.github.io/bezierinfo/