canvas-畫一顆心

時間 2019-11-10

標籤 canvas 一顆简体版

原文原文鏈接

1、思路javascript

採用三次貝塞爾曲線，由於曲線度數不是二次能夠控制的，其次就是本身找一個有座標的心，大概找到控制點，畫完一半就能夠對稱完成html

2、代碼java

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。