1. 在html頁面中引入canvas標簽，設置大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Canvas畫板</title> <link rel="stylesheet" href="./index.css"> </head> <body> <!-- 引入js文件 --> <script src="./index.js"></script> <div class="content"> <input type="file" id="img_input" onchange="fileInput(this.files)"> <canvas width="600" height="500" id="canvas"> </canvas> </div> </body> </html>
2. 隨意寫點樣式，給畫板加個邊框
* { margin: 0; padding: 0; } .content { position: relative; width: 900px; height: 100vh; margin: 0 auto; } .content input { position: absolute; top: 40px; left: 200px; margin-left: 50px; } .content canvas { border: 1px solid #30336b; margin-top: 100px; margin-left: 150px; }
3. js代碼
- 在頁面加載完成后獲取頁面的canvas對象，並綁定監聽事件，以實現拖動
window.onload = function () { // 獲取canvas對象 let canvas = document.getElementById("canvas"); canvasWidth = canvas.width; canvasHeight = canvas.height; let ctx = canvas.getContext("2d"); }
- 處理input標簽選擇的圖片，創建圖片添加至畫板中
function fileInput(files) { let reader = new FileReader(); reader.onload = function (e) { // 創建圖片對象 img = new Image(); // 讀取圖片路勁 img.src = e.target.result; let ctx = canvas.getContext("2d"); img.onload = function () { // 設置縮放比例 let scale = 1; // 長或寬超過150進行縮放 let maxNum = 150; if (this.width > maxNum || this.height > maxNum) { if (this.width > this.height) { scale = maxNum / this.width; } else { scale = maxNum / this.height; } } ctxHeight = scale * this.height; ctxWidth = scale * this.width; // 清除畫布 ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 顯示圖片 ctx.drawImage(img, 0, 0, ctxWidth, ctxHeight); // 重新選擇圖片時對img_x, img_y清零 img_x = 0; img_y = 0; }; }; reader.readAsDataURL(files[0]); }
- 部分監聽事件的函數，主要由mouseup,mousedown,mousemove事件完成拖拽
// 事件處理函數 //鼠標按下 function mouseDown(e) { let x = e.offsetX; let y = e.offsetY; // 記錄鼠標相對於圖片的位置 mouseX = e.offsetX - img_x; mouseY = e.offsetY - img_y; // 判斷是否在圖片范圍內 if ( x >= img_x && x <= img_x + ctxWidth && y >= img_y && y <= img_y + ctxHeight ) { isDown = true; } } // 鼠標松開 function mouseUp() { isDown = false; } // 鼠標移動 function mouseMove(e) { if (isDown) { let x = e.offsetX - mouseX; let y = e.offsetY - mouseY; ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 判斷有無超過邊界 if (y < 0) { y = 0; } if (x < 0) { x = 0; } if (x > canvasWidth - ctxWidth) { x = canvasWidth - ctxWidth; } if (y > canvasHeight - ctxHeight) { y = canvasHeight - ctxHeight; } ctx.drawImage(img, x, y, ctxWidth, ctxHeight); img_x = x; img_y = y; } } function mouseLeave() { isDown = false; } };
4. js完整代碼 補充了上面函數所使用到的全局變量
let ctxHeight, ctxWidth, canvasWidth, canvasHeight, mouseX, mouseY; let isDown = false; let img_x = 0; let img_y = 0; window.onload = function () { // 獲取canvas對象 let canvas = document.getElementById("canvas"); canvasWidth = canvas.width; canvasHeight = canvas.height; let ctx = canvas.getContext("2d"); // 綁定事件 canvas.addEventListener("mousedown", mouseDown); canvas.addEventListener("mouseup", mouseUp); canvas.addEventListener("mousemove", mouseMove); canvas.addEventListener("mouseleave", mouseLeave); // 事件處理函數 //鼠標按下 function mouseDown(e) { let x = e.offsetX; let y = e.offsetY; // 記錄鼠標相對於圖片的位置 mouseX = e.offsetX - img_x; mouseY = e.offsetY - img_y; // 判斷是否在圖片范圍內 if ( x >= img_x && x <= img_x + ctxWidth && y >= img_y && y <= img_y + ctxHeight ) { isDown = true; } } // 鼠標松開 function mouseUp() { isDown = false; } // 鼠標移動 function mouseMove(e) { if (isDown) { let x = e.offsetX - mouseX; let y = e.offsetY - mouseY; ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 判斷有無超過邊界 if (y < 0) { y = 0; } if (x < 0) { x = 0; } if (x > canvasWidth - ctxWidth) { x = canvasWidth - ctxWidth; } if (y > canvasHeight - ctxHeight) { y = canvasHeight - ctxHeight; } ctx.drawImage(img, x, y, ctxWidth, ctxHeight); img_x = x; img_y = y; } } function mouseLeave() { isDown = false; } }; function fileInput(files) { let reader = new FileReader(); reader.onload = function (e) { // 創建圖片對象 img = new Image(); // 讀取圖片路勁 img.src = e.target.result; let ctx = canvas.getContext("2d"); img.onload = function () { // 設置縮放比例 let scale = 1; // 長或寬超過150進行縮放 let maxNum = 150; if (this.width > maxNum || this.height > maxNum) { if (this.width > this.height) { scale = maxNum / this.width; } else { scale = maxNum / this.height; } } ctxHeight = scale * this.height; ctxWidth = scale * this.width; // 清除畫布 ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 顯示圖片 ctx.drawImage(img, 0, 0, ctxWidth, ctxHeight); // 重新選擇圖片時對img_x, img_y清零 img_x = 0; img_y = 0; }; }; reader.readAsDataURL(files[0]); }