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

代码语言：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(106, 79);
      c.quadraticCurveTo(114, 4, 209, 14);
      c.fill();
      c.stroke();
      c.beginPath();
      c.lineWidth = 5;
      c.moveTo(376, 14);
      c.quadraticCurveTo(431, 13, 446, 15);
      c.quadraticCurveTo(488, 20, 498, 48);
      c.quadraticCurveTo(508, 75, 512, 110);
      c.fill();
      c.stroke();
      c.beginPath();
      c.lineWidth = 8;
      c.moveTo(470, 65);
      c.lineTo(483, 27);
      c.stroke();
      c.beginPath();
      c.fillStyle = "#fecce5";
      c.moveTo(473, 65);
      c.lineTo(483, 30);
      c.bezierCurveTo(502, 46, 496, 60, 512, 110);
      c.closePath();
      c.fill();
      c.lineWidth = 10;
      c.beginPath();
      c.strokeStyle = "#33190c";
      c.fillStyle = "#ffffd9";
      c.moveTo(280, 6);
      c.bezierCurveTo(476, 0, 535, 154, 541, 166);
      c.lineTo(546, 180);
      c.bezierCurveTo(584, 304, 530, 368, 432, 392);
      c.quadraticCurveTo(210, 460, 90, 372);
      c.quadraticCurveTo(38, 324, 34, 314);
      c.quadraticCurveTo(1, 268, 38, 174);
      c.quadraticCurveTo(128, 8, 280, 6);
      c.closePath();
      c.fill();
      c.stroke();
      c.fillStyle = "#fff";
      c.beginPath();
      c.moveTo(29, 294);
      c.quadraticCurveTo(57, 339, 99, 371);
      c.quadraticCurveTo(272, 404, 427, 390);
      c.bezierCurveTo(500, 371, 567, 330, 549, 216);
      c.bezierCurveTo(560, 298, 518, 360, 427, 378);
      c.quadraticCurveTo(272, 404, 99, 364);
      c.quadraticCurveTo(55, 334, 29, 294);
      c.closePath();
      c.fill();
      c.strokeStyle = "#33190c";
      c.lineWidth = 7;
      c.beginPath();
      c.moveTo(6, 212);
      c.lineTo(23, 212);
      c.stroke();
      c.moveTo(7, 211);
      c.quadraticCurveTo(5, 212, 7, 213);
      c.stroke();
      c.beginPath();
      c.moveTo(2, 246);
      c.lineTo(15, 246);
      c.stroke();
      c.moveTo(6, 245);
      c.quadraticCurveTo(1, 246, 6, 247);
      c.stroke();
      c.beginPath();
      c.moveTo(6, 284);
      c.lineTo(17, 281);
      c.stroke();
      c.moveTo(9, 282);
      c.quadraticCurveTo(4, 287, 6, 282);
      c.stroke();
      c.lineWidth = 6;
      c.beginPath();
      c.moveTo(529, 233);
      c.lineTo(596, 246);
      c.stroke();
      c.moveTo(530, 233);
      c.quadraticCurveTo(528, 233, 530, 234);
      c.stroke();
      c.moveTo(596, 246);
      c.quadraticCurveTo(597, 246, 596, 246);
      c.stroke();
      c.beginPath();
      c.moveTo(525, 263);
      c.lineTo(587, 290);
      c.stroke();
      c.moveTo(526, 263);
      c.quadraticCurveTo(524, 263, 527, 264);
      c.stroke();
      c.moveTo(587, 290);
      c.quadraticCurveTo(589, 291, 587, 290);
      c.stroke();
      c.beginPath();
      c.moveTo(523, 296);
      c.lineTo(581, 331);
      c.stroke();
      c.moveTo(524, 298);
      c.quadraticCurveTo(522, 294, 524, 297);
      c.stroke();
      c.moveTo(581, 331);
      c.quadraticCurveTo(583, 332, 581, 331);
      c.stroke();
      c.lineWidth = 5;
      c.beginPath();
      c.moveTo(163, 40);
      c.lineTo(182, 42);
      c.moveTo(182, 42);
      c.quadraticCurveTo(185, 42, 180, 42);
      c.stroke();
      c.beginPath();
      c.moveTo(374, 54);
      c.quadraticCurveTo(386, 43, 396, 57);
      c.moveTo(375, 54);
      c.quadraticCurveTo(372, 56, 376, 53);
      c.moveTo(395, 56);
      c.quadraticCurveTo(397, 58, 395, 56);
      c.stroke();
      c.fillStyle = "#e5f8ef";
      c.beginPath();
      c.moveTo(190, 30);
      c.bezierCurveTo(180, 57, 216, 65, 218, 20);
      c.quadraticCurveTo(203, 23, 190, 30);
      c.closePath();
      c.fill();
      c.beginPath();
      c.moveTo(239, 15);
      c.bezierCurveTo(233, 70, 280, 60, 278, 11);
      c.quadraticCurveTo(2.........完整代码请登录后点击上方下载按钮下载查看