canvas-画一颗心

一、思路

采用三次贝塞尔曲线，因为曲线度数不是二次可以控制的，其次就是自己找一个有坐标的心，大概找到控制点，画完一半就可以对称完成

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>canvas</title>
</head>
<body onload="draw();">
  <canvas width="500" height="500" id="canvas"></canvas>

  <script>
    function draw() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext){
        var ctx = canvas.getContext('2d');

        ctx.beginPath();
        ctx.moveTo(40,30);
        ctx.bezierCurveTo(40,20,30,10,20,10);
        ctx.bezierCurveTo(10,10,0,20,0,30);
        ctx.bezierCurveTo(2,45,16,60,40,80);
        ctx.bezierCurveTo(64,60,78,45,80,30);
        ctx.bezierCurveTo(80,20,70,10,60,10);
        ctx.bezierCurveTo(50,10,40,20,40,30);
        ctx.fillStyle = '#ff0000';
        ctx.fill();
          
        ctx.fillStyle = "#000000";//颜色
        ctx.font = "normal 20px 微软雅黑";//字体
    　　 ctx.textBaseline = "middle";//竖直对齐
    　　 ctx.textAlign = "center";//水平对齐　
        // ctx.moveTo(40,30);
        ctx.fillText("邢悦", 40, 45, 40);
      }
    }
  </script>
</body>
</html>

 

posted @ 2019-06-05 11:29  IT-蓝童鞋  阅读(422)  评论(0)    收藏  举报