html5 canvas线条合成的爱心动画特效

神秘人9527

于 2022-11-13 10:59:42 发布

阅读量311

点赞数

分类专栏：小鄢文章标签： html5 html 前端

本文链接：https://blog.csdn.net/weixin_52354260/article/details/127829678

版权

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Forming  Colorful Heart</title>
  
  
  
      <style>
 html,body{
     
            border: 0;
            padding: 0;
            margin: 0;
            overflow: hidden;
            background: #000;
}

.info{
     
  z-index:999;
  position : absolute;
  left:0;
  top:0;
  padding:10px;
  color:#fff;
  background: rgba(0,0,0,0.5);
  text-transform:capitalize;
}
</style>

  
</head>

<body>

  <canvas width="300" height="300" style="width:100%;height:100vh;" id="c"></canvas>
  
  

    <script>
var canvas = document.getElementById('c');
var ctx = canvas.getContext("2d");
var height = void 0,width = void 0,innerpoints