canvas-画一颗心

最新推荐文章于 2023-03-07 14:32:49 发布

Rki-dor

最新推荐文章于 2023-03-07 14:32:49 发布

阅读量106

点赞数

原文链接：http://www.cnblogs.com/it-cuiyi/p/10978625.html

版权

一、思路

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

二、代码

<!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 οnlοad="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>

转载于:https://www.cnblogs.com/it-cuiyi/p/10978625.html

Rki-dor

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas-画一颗心

一、思路采用三次贝塞尔曲线，因为曲线度数不是二次可以控制的，其次就是自己找一个有坐标的心，大概找到控制点，画完一半就可以对称完成二、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont...
复制链接

扫一扫