網(wǎng)頁設(shè)計，使用拖拽的方式生成網(wǎng)頁！JavaScript庫-VvvebJs

紹

VvvebJs是一個開源的網(wǎng)頁拖拽自動生成的JavaScript庫，你可以以簡單拖拽的方式生成自己需要的網(wǎng)頁樣式，內(nèi)置jquery和Bootstrap，你可以拖拽相關(guān)的組件進(jìn)行網(wǎng)頁的構(gòu)建，非常的方便，而且可以實(shí)時修改代碼，功能豐富，使用簡單，界面友好，特別適合一些專注于展示的網(wǎng)頁設(shè)計，需要的朋友不可錯過！

Github地址

https://github.com/givanz/VvvebJs

使用方式

如下代碼：

<!-- jquery-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hotkeys.js"></script>
<!-- bootstrap-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- builder code-->
<script src="libs/builder/builder.js"></script>	
<!-- undo manager-->
<script src="libs/builder/undo.js"></script>	
<!-- inputs-->
<script src="libs/builder/inputs.js"></script>	
<!-- components-->
<script src="libs/builder/components-bootstrap4.js"></script>	
<script src="libs/builder/components-widgets.js"></script>	
<script>
$(document).ready(function() 
{
	Vvveb.Builder.init('demo/index.html', function() {
		//load code after page is loaded here
		Vvveb.Gui.init();
	});
});
</script>

要初始化編輯器，調(diào)用Vvveb.Builder.init。第一個參數(shù)是要加載以進(jìn)行編輯的URL，它必須位于相同的子域中才能進(jìn)行編輯。第二個參數(shù)是頁面加載完成時調(diào)用的函數(shù)，默認(rèn)情況下調(diào)用編輯器Gui.init();

結(jié)構(gòu)

Component Group是一個組件集合，例如Bootstrap 4組由Button和Grid等組件組成，該對象僅用于在編輯器左側(cè)面板中對組件進(jìn)行分組。例如，Widgets組件組只有兩個組件視頻和地圖，并被定義為如下

Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/video"];

Component是一個對象，它提供可以在畫布上放置的html以及在選擇組件時可以編輯的屬性，例如Video Component，具有Url和Target屬性的html鏈接Component定義為：

Vvveb.Components.extend("_base", "html/link", {
 nodes: ["a"],
 name: "Link",
 properties: [{
 name: "Url",
 key: "href",
 htmlAttr: "href",
 inputtype: LinkInput
 }, {
 name: "Target",
 key: "target",
 htmlAttr: "target",
 inputtype: TextInput
 }]
});

在Component屬性集合中使用Input對象來編輯屬性，例如文本輸入，選擇，顏色，網(wǎng)格行等。例如，TextInput擴(kuò)展Input對象并定義為：

var TextInput = $.extend({}, Input, {
 events: {
 "keyup": ['onChange', 'input'],
	 },
	setValue: function(value) {
		$('input', this.element).val(value);
	},
	
	init: function(data) {
		return this.render("textinput", data);
	},
 }
);

輸入還需要一個在編輯器html（在editor.html中）定義為<script>標(biāo)簽的模板，其id為vvveb-input-inputname，例如對于文本輸入為vvveb-input-textinput，定義：

<script id="vvveb-input-textinput" type="text/html">
	
	<div>
		<input name="{%=key%}" type="text" class="form-control"/>
	</div>
	
</script>

以上是借助瀏覽器翻譯工具，對官網(wǎng)的文檔進(jìn)行簡單的翻譯，可能會有些不夠準(zhǔn)確的地方，感興趣的小伙伴可以直接查看相關(guān)文檔！

設(shè)計界面預(yù)覽

總結(jié)

VvvebJs是一個非常強(qiáng)大的網(wǎng)頁可視化生成構(gòu)建工具，讓不懂網(wǎng)頁設(shè)計的小伙伴們也能夠通過拖拽來生成美觀大方的網(wǎng)頁出來，讓設(shè)計網(wǎng)頁就像設(shè)計圖片一樣，VvvebJs特別適合展示型網(wǎng)頁，甚至可以不需要代碼就能完成一項復(fù)雜的網(wǎng)頁設(shè)計，總體來說，VvvebJs是一個值得嘗試的工具！

anvas是HTML5中的一個重要特性，它是一個可以使用JavaScript繪制圖形的HTML元素。本文將分為以下幾個部分：

準(zhǔn)備工作
繪制圓形
圓形跟隨鼠標(biāo)移動
圓形隨時間逐漸消失

接下來，我們將逐一詳細(xì)講解。

1. 準(zhǔn)備工作

在開始之前，我們需要準(zhǔn)備一些基本的工作。首先，我們需要在HTML文件中添加一個Canvas元素：

<canvas id="canvas"></canvas>

然后，在JavaScript文件中獲取Canvas元素和Canvas上下文：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

2. 繪制圓形

現(xiàn)在，我們將開始繪制圓形。我們將使用Canvas的繪圖API來繪制圓形。首先，我們需要定義圓形的顏色和大小：

const footprintColor = '#000000';
const footprintSize = 10;

然后，我們需要編寫一個函數(shù)來繪制圓形：

function drawFootprint(x, y) {
  ctx.beginPath();
  ctx.fillStyle = footprintColor;
  ctx.arc(x, y, footprintSize, 0, Math.PI * 2);
  ctx.fill();
}

在這個函數(shù)中，我們使用Canvas的 beginPath() 方法來開始一條新的路徑。然后，我們使用 fillStyle 屬性來設(shè)置圓形的顏色。接下來，我們使用 arc() 方法來繪制圓形。最后，我們使用 fill() 方法來填充路徑。

現(xiàn)在，我們已經(jīng)可以在Canvas上繪制圓形了。我們可以在Canvas上，添加一個鼠標(biāo)移動事件監(jiān)聽器，當(dāng)鼠標(biāo)移動時，我們將在Canvas上繪制一個圓形。

canvas.addEventListener('mousemove', (event) => {
  const x = event.clientX;
  const y = event.clientY;
  drawFootprint(x, y);
});

在這個事件監(jiān)聽器中，我們使用 clientX 和 clientY 屬性來獲取鼠標(biāo)的坐標(biāo)。然后，我們調(diào)用 drawFootprint() 函數(shù)來繪制圓形。

3. 圓形跟隨鼠標(biāo)移動

現(xiàn)在，我們已經(jīng)可以在Canvas上繪制圓形了。但是，我們希望圓形能夠跟隨鼠標(biāo)移動。我們可以使用Canvas的 clearRect() 方法來清除之前繪制的圓形，然后再繪制新的圓形。

canvas.addEventListener('mousemove', (event) => {
  const x = event.clientX;
  const y = event.clientY;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawFootprint(x, y);
});

在這個事件監(jiān)聽器中，我們使用 clearRect() 方法來清除Canvas上之前繪制的圓形。然后，我們調(diào)用 drawFootprint() 函數(shù)來繪制新的圓形。

4. 圓形隨時間逐漸消失

現(xiàn)在，我們已經(jīng)可以在Canvas上，繪制跟隨鼠標(biāo)移動的圓形了。但是，我們希望圓形能夠隨著時間的推移逐漸消失。我們可以使用 setInterval() 函數(shù)來定時清除Canvas上的圓形。

let footprints = [];

function drawFootprint(x, y) {
  const footprint = {
    x,
    y,
    alpha: 1
  };
  footprints.push(footprint);
}

function drawFootprints() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  footprints.forEach((footprint) => {
    ctx.beginPath();
    ctx.fillStyle = footprintColor;
    ctx.arc(footprint.x, footprint.y, footprintSize, 0, Math.PI * 2);
    ctx.globalAlpha = footprint.alpha;
    ctx.fill();
    footprint.alpha -= 0.01;
  });
  footprints = footprints.filter((footprint) => footprint.alpha > 0);
}

canvas.addEventListener('mousemove', (event) => {
  const x = event.clientX;
  const y = event.clientY;
  drawFootprint(x, y);
});

setInterval(() => {
  drawFootprints();
}, 10);

在這個代碼中，我們將每個圓形存儲在一個數(shù)組中。每次繪制圓形時，我們將新的圓形添加到數(shù)組中。然后，我們使用 setInterval() 函數(shù)定時繪制所有圓形，并將透明度逐漸減小。最后，我們過濾掉透明度為0的圓形。

這樣，我們就實(shí)現(xiàn)了一個拖影的例子。

希望本文能夠?qū)δ兴鶐椭兄x您的閱讀！

人人為我，我為人人，謝謝您的瀏覽，我們一起加油吧。

家好！歡迎來到本教程，我們將深入了解使用 HTML 畫布和 JavaScript 在代碼中創(chuàng)建有趣的氣泡的世界。最好的部分？我們將只使用一點(diǎn) HTML 和所有 JavaScript，而不是 CSS 來實(shí)現(xiàn)所有這一切。

揭示概念

今天，我們要掌握以下幾個概念：

使用畫布上下文的 arc 方法創(chuàng)建圓。

利用 requestAnimationFrame 函數(shù)實(shí)現(xiàn)平滑的圓形動畫。

利用 JavaScript 類的強(qiáng)大功能來創(chuàng)建多個圓圈，而無需重復(fù)代碼。

向我們的圓圈添加描邊樣式和填充樣式以獲得 3D 氣泡效果。

你可以跟著我一起看，或者如果你想看源代碼，可以使用最終的codepen

入門

首先，我們需要一個 HTML5 Canvas 元素。 Canvas 是創(chuàng)建形狀、圖像和圖形的強(qiáng)大元素。這就是氣泡將產(chǎn)生的地方。讓我們來設(shè)置一下 -

<canvas id="canvas"></canvas>

為了使用畫布做任何有意義的事情，我們需要訪問它的上下文。 Context 提供了在畫布上渲染對象和繪制形狀的接口。

讓我們訪問畫布及其上下文。

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

我們將設(shè)置畫布以使用整個窗口的高度和寬度 -

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

讓我們通過添加一些 css 為畫布提供一個漂亮的舒緩淺藍(lán)色背景。這是我們要使用的唯一 CSS。如果您愿意，也可以使用 JavaScript 來完成此操作。

#canvas {
  background: #00b4ff;
}

是時候創(chuàng)造泡泡了！

讓我們進(jìn)入有趣的部分。我們將通過單擊畫布來創(chuàng)建氣泡。為了實(shí)現(xiàn)這一點(diǎn)，我們首先創(chuàng)建一個點(diǎn)擊事件處理程序：

canvas.addEventListener('click', handleDrawCircle);

由于我們需要知道在畫布上單擊的位置，因此我們將在句柄 DrawCircle 函數(shù)中跟蹤它并使用事件的坐標(biāo) -

//We are adding x and y here because we will need it later.
let x, y
const handleDrawCircle = (event) => {
  x = event.pageX;
  y = event.pageY;

// Draw a bubble!
  drawCircle(x, y);
};

用圓弧法畫圓

為了創(chuàng)建圓圈，我們將利用畫布上下文中可用的 arc 方法。 Arc 方法接受 x 和 y - 圓心、半徑、起始角和結(jié)束角，對于我們來說，這將是 0 和 2* Math.PI，因為我們正在創(chuàng)建一個完整的圓。

const drawCircle = (x, y) => {
  context.beginPath();
  context.arc(x, y, 50, 0, 2 * Math.PI);

  context.strokeStyle = 'white';
  context.stroke();
};

使用 requestAnimationFrame 方法移動圓圈

現(xiàn)在我們有了圓圈，讓我們讓它們移動，因為……

GIF

請記住，當(dāng)我們創(chuàng)建圓時，我們使用了 arc 方法，它接受 x 和 y 坐標(biāo) - 圓的中心。如果我們快速移動圓的 x 和 y 坐標(biāo)，就會給人一種圓在移動的印象。讓我們試試吧！

//Define a speed by which to increment to the x and y coordinates

const dx = Math.random() * 3;
const dy = Math.random() * 7;//Increment the center of the circle with this speed
x = x + dx;
y = y - dy;

我們可以將其移至函數(shù)內(nèi) -

let x, y;

const move = () => {
  const dx = Math.random() * 3;
  const dy = Math.random() * 7;  x = x + dx;
  y = y - dy;
};

為了讓我們的圓圈無縫移動，我們將創(chuàng)建一個動畫函數(shù)并使用瀏覽器的 requestAnimationFrame 方法來創(chuàng)建一個移動的圓圈。

const animate = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);

  move();
    drawCircle(x,y);  requestAnimationFrame(animate);
};//Don't forget to call animate at the bottom 
animate();

創(chuàng)建粒子：引入粒子類

現(xiàn)在我們已經(jīng)創(chuàng)建了一個圓圈，是時候創(chuàng)建多個圓圈了！

但在我們創(chuàng)建多個圓圈之前，讓我們準(zhǔn)備一下我們的代碼。為了避免重復(fù)我們的代碼，我們將使用類并引入 Particle 類。粒子是我們動態(tài)藝術(shù)作品和動畫的構(gòu)建塊。每個氣泡都是一個粒子，具有自己的位置、大小、運(yùn)動和顏色屬性。讓我們定義一個 Particle 類來封裝這些屬性：

class Particle {
  constructor(x = 0, y = 0) {}

  draw() {
    // Drawing the particle as a colored circle
    // ...
  }  move() {
    // Implementing particle movement
    // ...
  }
}

讓我們將一些已設(shè)置的常量移至 Particle 類 -

class Particle {
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
    this.radius = Math.random() * 50;
    this.dx = Math.random() * 3;
    this.dy = Math.random() * 7;
  }

  draw() {
    // Drawing the particle as a colored circle
    // ...
  }  move() {
    // Implementing particle movement
    // ...
  }
}

draw 方法將負(fù)責(zé)在畫布上渲染粒子。我們已經(jīng)在drawCircle中實(shí)現(xiàn)了這個功能，所以讓我們將它移動到我們的類中并將變量更新為類變量

class Particle {
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
    this.radius = Math.random() * 50;
    this.dx = Math.random() * 3;
    this.dy = Math.random() * 7;
    this.color = 'white';
  }

  draw() {
    context.beginPath();
    context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    context.strokeStyle = this.color;
    context.stroke();    context.fillStyle = this.color;
    context.fill();
  }  move() {}
}

同樣，讓我們在類中移動 move 函數(shù) -

move() {
    this.x = this.x + this.dx;
    this.y = this.y - this.dy;
}

現(xiàn)在，我們需要確保在事件處理程序中調(diào)用 Particle 類。

const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;

  const particle = new Particle(x, y);
};canvas.addEventListener('click', handleDrawCircle);

由于我們需要在 animate 函數(shù)中訪問該粒子，以便調(diào)用其 move 方法，因此我們將該粒子存儲在一個名為 molecularArray 的數(shù)組中。當(dāng)創(chuàng)建大量粒子時，這個數(shù)組也會很有幫助。這是反映這一點(diǎn)的更新代碼 -

const particleArray = [];

const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;  const particle = new Particle(x, y);
  particleArray.push(particle);
};canvas.addEventListener('click', handleDrawCircle);

記得也要更新動畫功能 -

此時，您將在屏幕上看到這個粒子 -

驚人的！現(xiàn)在，到了有趣的部分！讓我們創(chuàng)建很多圓圈并設(shè)計它們的樣式，使它們看起來像氣泡。

為了創(chuàng)建大量氣泡，我們將使用 for 循環(huán)創(chuàng)建粒子并將它們添加到我們在此處創(chuàng)建的粒子數(shù)組中。

const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;

  for (let i = 0; i < 50; i++) {
    const particle = new Particle(x, y);
    particleArray.push(particle);
  }
};canvas.addEventListener('click', handleDrawCircle);

在動畫函數(shù)中，我們將通過清除畫布并在新位置重新繪制粒子來不斷更新畫布。這會給人一種圓圈在移動的錯覺。

const animate = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);

  particleArray.forEach((particle) => {
    particle?.move();
    particle?.draw();
  });  requestAnimationFrame(animate);
};animate();

現(xiàn)在我們有了移動的氣泡，是時候給它們添加顏色，使它們看起來像氣泡了！

我們將通過向氣泡添加漸變填充來實(shí)現(xiàn)此目的。這可以使用 context.createRadialGradient 方法來完成。

const gradient = context.createRadialGradient(
  this.x,
  this.y,
  1,
  this.x + 0.5,
  this.y + 0.5,
  this.radius
);

gradient.addColorStop(0.3, 'rgba(255, 255, 255, 0.3)');
gradient.addColorStop(0.95, '#e7feff');context.fillStyle = gradient;

總結(jié)

恭喜！您剛剛僅使用 HTML Canvas 和 JavaScript 創(chuàng)建了一些超級有趣的東西。您已經(jīng)學(xué)習(xí)了如何使用 arc 方法、利用 requestAnimationFrame、利用 JavaScript 類的強(qiáng)大功能以及使用漸變設(shè)計氣泡以實(shí)現(xiàn) 3D 氣泡效果。

請隨意嘗試顏色、速度和大小，使您的動畫真正獨(dú)一無二。

我希望您在學(xué)習(xí)本教程時能像我在創(chuàng)建它時一樣獲得樂趣。現(xiàn)在，輪到你進(jìn)行實(shí)驗了。我很想看看你是否嘗試過這個以及你創(chuàng)造了什么。與我分享您的代碼鏈接，我很樂意查看。

在線咨詢

上一篇：HTML DOM 節(jié)點(diǎn)介紹
下一篇：html常用代碼大全

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

網(wǎng)頁設(shè)計，使用拖拽的方式生成網(wǎng)頁！JavaScript庫-VvvebJs

紹

Github地址

相關(guān)特性

使用方式

設(shè)計界面預(yù)覽

總結(jié)

1. 準(zhǔn)備工作

2. 繪制圓形

3. 圓形跟隨鼠標(biāo)移動

4. 圓形隨時間逐漸消失

揭示概念

入門

是時候創(chuàng)造泡泡了！

用圓弧法畫圓

使用 requestAnimationFrame 方法移動圓圈

創(chuàng)建粒子：引入粒子類

總結(jié)

您的項目需求