在現代社會中，二維碼已經成為了不可或缺的一部分。我們可以看到它們出現在廣告、名片、商場廣告、食品包裝等地方。二維碼是如何制作的呢？這個任務可以交給JavaScript完成。本篇文章將為您展示如何使用JavaScript制作二維碼。
首先，我們需要一個JavaScript庫——QRCode.js。QRCode.js是一個純JavaScript制作二維碼的庫，它是一個基于HTML5 Canvas實現的JavaScript庫，可設計、運行于web瀏覽器和node.js中。現在，我們開始探索QRCode.js。
先假設我們需要在頁面上展示一張二維碼，該二維碼URL指向Google.com。我們可以使用QRCode.js來在網站上創建二維碼：

<script src="qrcode.min.js"></script>
<span id="qrcode"></span>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://www.google.com/");
</script>

上面的代碼中，我們在HTML中添加了一個元素，它的id屬性為"qrcode"。在JavaScript中，我們創建了一個QRCode實例，并將其綁定到頁面的元素上。
接下來，讓我們看一下如何使用QRCode.js插件來生成自定義二維碼。我們先創建一個簡單的表單，這個表單有一個輸入框和一個按鈕：

<input type="text" id="text"/>
<input type="button" value="生成二維碼" onclick="makeCode()"/>
<div id="qrcode"></div>

然后，我們使用JavaScript編寫一個函數來生成二維碼：

function makeCode() {  
var elText = document.getElementById("text");
if (!elText.value) {
alert("請輸入你要生成的URL地址");
elText.focus();
return;
}
var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 100,
height: 100
});
qrcode.makeCode(elText.value);
}

在上述代碼中，我們定義了一個名為makeCode()的函數。該函數從輸入框中獲取值，然后使用QRCode.js庫來生成二維碼。
最后，讓我們看一下如何在網站上生成帶有Logo的二維碼：

var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 256,
height: 256
});
qrcode.makeCode('http://www.google.com/');
//在圖片上繪制一個Logo
var canvas = document.getElementsByTagName('canvas')[0];
var img = new Image();
img.src = 'logo.png';
img.onload = function () {
canvas.getContext('2d').drawImage(img, 100, 100, 50, 50);
};

在上面的代碼中，我們創建了一個名為qrcode的QRCode實例，并將其綁定到一個頁面上的