Tag:Line cap

  • 6. painting snowflakes in the sky with canvas 1


    Attachment: drawing the flying snowflakes 2 with canvasDrawing flying snowflakes with canvas 3 Effect preview: https://codepen.io/andy-js/pen/ojpzpdeIt is recommended that you right-click a new label or window to open a preview Today, I saw a beautiful snowflake drawn with pure CSS published by Mr. comehopeIt’s a whim. I drew a picture with canvas. 1. First, we […]

  • 7. Draw flying snowflakes with canvas 2


    Attached link: draw flying snowflake 1 with canvasDrawing flying snowflakes with canvas 3 Next:Effect link: https://codepen.io/andy-js/pen/qwwavjjRight click to open it. This time, we installed the JS method in the previous article, and basically added an initial angle setting.Called as a method at any time. Direct code: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” […]

  • 8. Draw flying snowflakes with canvas 3


    Link before:Using canvas to draw flying snowflake 1Drawing flying snowflakes 2 with canvas This effect: Effect preview: https://codepen.io/andy-js/pen/yzpyqvz No nonsense, just code itThe difference is that it increases the random appearance and top-down effect of snowflakes.And this time I used RAF to do animation.The next article introduces some features of Raf. <!DOCTYPE html> <html lang=”en”> […]

  • Canvas easy clock


    First look at the results: Reference resources: 1: Canvas drawing clock 2: Canvas animation clock 3: HTML 5 canvas linecap properties 4: HTML5 canvas arc() method 5:Window.requestAnimationFrame() 6:window.cancelAnimationFrame() OK, let’s get to the point; after referring to the above contents, let’s also write a simple clock by ourselves.First, grasp the key knowledge:1: The hour system […]