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(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.st.........完整代码请登录后点击上方下载按钮下载查看