JavaScript利用多彩線條擺出心形效果的示例代碼

更新時間：2022年07月06日 11:12:40 作者：肥學(xué)

這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript語言實(shí)現(xiàn)多彩線條擺出心形效果，文中的實(shí)現(xiàn)步驟講解詳細(xì)，快跟隨小編一起動手嘗試一下吧

演示

源碼展示

創(chuàng)建畫布

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

基礎(chǔ)樣式設(shè)置

overflow 語法： overflow：{1,2}= visible | hidden | scroll | auto

默認(rèn)值：visible

取值：

visible：不剪切內(nèi)容。hidden：將超出對象尺寸的內(nèi)容進(jìn)行裁剪，將不出現(xiàn)滾動條。scroll：將超出對象尺寸的內(nèi)容進(jìn)行裁剪，并以滾動條的方式顯示超出的內(nèi)容。auto：在需要時剪切內(nèi)容并添加滾動條，此為body對象和textarea的默認(rèn)值。

padding：[ | ]{1,4}

默認(rèn)值：看每個獨(dú)立屬性

相關(guān)屬性：[ padding-top ] || [ padding-right ] || [ padding-bottom ] || [padding-left ]

取值：：用長度值來定義內(nèi)補(bǔ)白。不允許負(fù)值：用百分比來定義內(nèi)補(bǔ)白。不允許負(fù)值

說明：檢索或設(shè)置對象四邊的內(nèi)部邊距。

如果提供全部四個參數(shù)值，將按上、右、下、左的順序作用于四邊。如果只提供一個，將用于全部的四邊。

如果提供兩個，第一個用于上、下，第二個用于左、右。如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。

內(nèi)聯(lián)對象可以使用該屬性設(shè)置左、右兩邊的內(nèi)補(bǔ)?。蝗粢O(shè)置上、下兩邊的內(nèi)補(bǔ)丁，必須先使該對象表現(xiàn)為塊級或內(nèi)聯(lián)塊級。

對應(yīng)的腳本特性為padding。

 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;
}

用js來設(shè)計動畫效果

定義變量

var canvas = document.getElementById('c');
var ctx = canvas.getContext("2d");
var height = void 0,width = void 0,innerpoints = [],outerpoints = [],particles = [];

var noofpoints = 200,trashold = 10;
var x = void 0,y = void 0,p = void 0,n = void 0,point = void 0,dx = void 0,dy = void 0,color = void 0;
deltaangle = Math.PI * 2 / noofpoints,
r = Math.min(height, width) * 0.5;

var distance = function distance(x1, y1, x2, y2) {
  return Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));
};
var mapVal = function mapVal(num, in_min, in_max, out_min, out_max) {
  return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
};

設(shè)置畫布resize

var resize = function resize() {
  height = ctx.canvas.clientHeight;
  width = ctx.canvas.clientWidth;

  if (ctx.canvas.clientWidth !== canvas.width ||
  ctx.canvas.clientHeight !== canvas.height)
  {
    console.log("resized");
    canvas.width = width;
    canvas.height = height;
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(-Math.PI);
    innerpoints = [];
    r = 10;
    for (var i = deltaangle; i <= Math.PI * 2; i += deltaangle) {
      x = r * 16 * Math.pow(Math.sin(i), 3);
      y = r * (13 * Math.cos(i) - 5 * Math.cos(2 * i) - 2 * Math.cos(3 * i) - Math.cos(4 * i));
      innerpoints.push({
        x: x,
        y: y });


      x = 10 * r * 16 * Math.pow(Math.sin(i), 3);
      y = 10 * r * (13 * Math.cos(i) - 5 * Math.cos(2 * i) - 2 * Math.cos(3 * i) - Math.cos(4 * i));
      outerpoints.push({
        x: x,
        y: y });


      var step = random(0.001, 0.003, true);
      particles.push({
        step: step,
        x: x,
        y: y });

    }
  }
};

對線條設(shè)計

var draw = function draw() {
  ctx.fillStyle = "rgba(0,0,0,0.03)";
  ctx.fillRect(-width, -height, width * 2, height * 2);
  ctx.beginPath();

  for (var i = 0; i < innerpoints.length; i++) {
    s = outerpoints[i];
    d = innerpoints[i];
    point = particles[i];

    if (distance(point.x, point.y, d.x, d.y) > 10) {
      dx = d.x - s.x;
      dy = d.y - s.y;

      point.x += dx * point.step;
      point.y += dy * point.step;
      color = distance(0, 0, point.x, point.y);
      ctx.beginPath();
      ctx.fillStyle = "hsl(" + color % 360 + ",100%,50%)";
      ctx.arc(point.x, point.y, 2, 0, Math.PI * 2, false);
      ctx.closePath();
      ctx.fill();
    } else {
      point.x = d.x;
      point.y = d.y;
      ctx.beginPath();
      ctx.arc(point.x, point.y, 2, 0, Math.PI * 2, false);
      ctx.closePath();
      ctx.fill();
      particles[i].x = s.x;
      particles[i].y = s.y;
      particles[i].step = random(0.001, 0.003, true);
    }
  }

};

到此這篇關(guān)于JavaScript利用多彩線條擺出心形效果的示例代碼的文章就介紹到這了,更多相關(guān)JavaScript線條擺出心形內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: