Canva is extensive and profound, the little woman is not talented, only knows a little basic usage (circle, rectangle). 😓 plaint oneself good slag. There is no need to describe the basic usage of Canvas here. I have the opportunity to sort out the basic and similarities and differences between Canvas and SVG. In fact, heart drawing, rose drawing, etc., know the equation, you can determine the point of each step to draw, then easy to do.

<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8"Word-wrap: break-word! Important; "> < span style> body,p{margin: 0; padding: 0; } p{ position: absolute; top: 0; left: 0; width: 200px; height: 300px; /* BACKGROUND: rgba(234, 234,211, 0.3) */} </style> </head> <body> <canvas id='heart'X = 16 (sinθ) ^3 y = 13 cosθ -5 cos 2θ -2 cos 3θ -cos 4θ </div> <script>let az = document.getElementById('heart');      
   let cont = az.getContext('2d');       
   az.width = 400;    
   az.height = 400;      
   let get_arr = function(a,len){      
      let arr=[];         
      for(leti=0; i<len; i++){letstep = i/len*(Math.PI*2); // increasing θlet vector = {             
            x : a*(16 * Math.pow(Math.sin(step), 3)),
            y : -a*(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))      
         }             
         arr.push(vector); 
       }         
      return arr;        
   }       
 function draw_heart(){ cont.beginPath(); Cont. Translate (100100); Cont. strokeStyle = // Set the offset to make the heart display complete'red';         
    cont.lineWidth = 1;          
    let len = 50;           
    letArr = get_arr(4,50)// Get data of all points of heart heart magnify 4 times console.log(arr);for(leti=0; i<len; i++){ cont.lineTo(arr[i].x,arr[i].y); // The heart-shaped dots are drawn one by one} cont.stroke(); } draw_heart(); </script> </body> </html>Copy the code