canvas绘制抱着爱心的可爱小猫效果代码-html代码-BFW代码库

canvas绘制抱着爱心的可爱小猫效果代码

代码语言：html

所属分类：表白

代码描述：canvas绘制抱着爱心的可爱小猫效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>
    <meta charset="UTF-8">

    <style>
        body{text-align:center;}.wrapper{height:500px;}canvas{margin-top:20px;transform:scale(0.5);}
    </style>
</head>

<body>
    <div class="wrapper">
        <canvas width="600" height="554" id="canvas"></canvas>
    </div>
    <script>
        var canvas = document.getElementById('canvas');
  if (canvas.getContext("2d")) {
      var c = canvas.getContext("2d");
      c.strokeStyle = "#33190c";
      c.fillStyle = "#ffffd9";
      c.lineWidth = 6;
      c.beginPath();
      c.moveTo(433, 458);
      c.lineTo(477, 438);
      c.bezierCurveTo(492, 433, 496, 453, 484, 463);
      c.lineTo(433, 494);
      c.fill();
      c.stroke();
      c.beginPath();
      c.moveTo(255, 392);
      c.lineTo(255, 526);
      c.bezierCurveTo(256, 555, 282, 557, 293, 530);
      c.lineTo(383, 530);
      c.bezierCurveTo(392, 557, 419, 558, 428, 526);
      c.quadraticCurveTo(434, 523, 430, 393);
      c.closePath();
      c.fill();
      c.stroke();
      c.fillStyle = "#fff";
      c.beginPath();
      c.moveTo(317, 501);
      c.quadraticCurveTo(345, 504, 363, 500);
      c.quadraticCurveTo(386, 492, 389, 480);
      c.quadraticCurveTo(393, 469, 396, 437);
      c.closePath();
      c.fill();
      c.fillStyle = "#e5f8ef";
      c.beginPath();
      c.moveTo(428, 459);
      c.bezierCurveTo(407, 456, 405, 479, 421, 482);
      c.bezierCurveTo(393, 482, 394, 507, 427, 511);
      c.quadraticCurveTo(429, 485, 428, 459);
      c.closePath();
      c.fill();
      c.strokeStyle = "#33190c";
      c.fillStyle = "#ffffd9";
      c.lineWidth = 4;
      c.beginPath();
      c.moveTo.........完整代码请登录后点击上方下载按钮下载查看