在當前數字化時代，人們的生活中離不開各類圖片。無論是網站上的圖片，還是社交媒體上的照片，圖片的分享和傳播已經成為了日常的一部分。為了保護自己的圖片版權，人們常常會給自己的圖片添加水印，以此來表明圖片的所有權。Javascript canvas技術可以幫助我們在圖片上添加水印，下面我們就來詳細討論一下這個技術。

首先，我們需要了解的是canvas技術。canvas是HTML5新增的標簽，它可以讓你在網頁上繪制各種圖形、動畫和圖片等。canvas是基于狀態機的，繪圖時需要先設定一些當前狀態，然后進行繪圖。canvas上的狀態可以是線條寬度，顏色等。下面我們來看一下如何使用canvas技術來給圖片添加水印。

let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
let image = new Image();
image.src = 'image.jpg'; // 指定圖片路徑
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0); //繪制圖片
context.font = '20px Arial'; //設置字體樣式
context.fillStyle = 'rgba(255, 0, 0, 0.5)'; //設置字體顏色和透明度
context.fillText('水印文字', 10, 50); //繪制字體
let url = canvas.toDataURL('image/png'); //將canvas轉換為圖片路徑
console.log(url); //輸出圖片路徑
};

上面的代碼中，首先我們創建了一個canvas元素，然后獲取了它的上下文。接著，我們創建了一個Image對象，指定了要添加水印的圖片路徑，然后在Image對象的onload事件中，我們將圖片繪制在canvas上，并添加了一段紅色的半透明水印文字。最后，我們使用toDataURL()方法將canvas轉換為圖片路徑，并輸出到控制臺上。

除了在圖片上添加文字水印，我們還可以在圖片上添加圖片水印。比如，我們可以將公司的logo添加到圖片上，以此表明圖片的版權歸公司所有。下面是一個實現的示例:

let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
let image = new Image();
let logo = new Image();
image.src = 'image.jpg'; // 指定圖片路徑
logo.src = 'logo.png'; // 指定logo路徑
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0); //繪制圖片
context.drawImage(logo, 10, 10); //繪制logo
let url = canvas.toDataURL('image/png'); //將canvas轉換為圖片路徑
console.log(url); //輸出圖片路徑
};

與上面的例子類似，這個例子中我們還是創建了一個canvas元素，并獲取了它的上下文。然后，我們創建了一個Image對象來指定要添加水印的圖片和watermark對象來指定水印圖片。在Image對象的onload事件中，我們將圖片和水印分別繪制在canvas上，并使用toDataURL()方法將canvas轉換為圖片路徑。最后，我們輸出了圖片路徑。

總之，canvas技術可以幫助我們在圖片上添加水印，保護自己的圖片版權。我們可以在圖片上添加文字水印或者圖片水印。這種技術在實際開發中應用廣泛，希望大家能夠學好這個技術，并將它應用在實際開發中。