在現代互聯網時代，圖像設計已經成為網站展示效果的重要組成部分。在這方面，JavaScript 作為一種經典的編程語言，既支持圖像處理和繪制， 又變得很流行。它具有許多強大的工具和框架，可以幫助設計師和開發人員制作令人印象深刻的視覺效果。

最常見的 JavaScript 圖像處理和繪制包括圖像處理，圖形創建，渲染，濾鏡效果，動畫效果和交互式圖表。下面我們通過舉幾個例子來更加詳細的介紹下。

// 1. 圖形繪制
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 設置線頭樣式
ctx.lineCap = "round";
// 設置線條粗細
ctx.lineWidth = 6;
// 設置線條顏色
ctx.strokeStyle = "blue";
// 繪制直線
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

上面這段代碼是 canvas 繪制圖形的例子，通過指定 canvas 元素，然后獲取 2D 上下文, 設置線頭樣式，線條粗細，顏色和坐標進行直線繪制。這就是 JavaScript 在圖像處理方面強大的工具。

// 2. 圖像處理
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.src = 'sample.png';
img.onload = function() {
ctx.drawImage(img, 10, 10);
};

上面這個例子是如何在 canvas 元素中繪制圖像。在代碼中，我們先聲明一個 Image 對象，然后加載我們要繪制的圖像,。然后指定繪制的位置就可以實現圖像的展示和處理。

// 3. 動畫效果
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let raf;
let ball = {
x: 100,
y: 100,
vx: 5,
vy: 1,
radius: 25,
color: 'blue',
draw: function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
}
};
function clear() {
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.fillRect(0,0,canvas.width,canvas.height);
}
function draw() {
clear();
ball.draw();
ball.x += ball.vx;
ball.y += ball.vy;
if (ball.y + ball.vy >canvas.height || ball.y + ball.vy< 0) {
ball.vy = -ball.vy;
}
if (ball.x + ball.vx >canvas.width || ball.x + ball.vx< 0) {
ball.vx = -ball.vx;
}
raf = window.requestAnimationFrame(draw);
}
canvas.addEventListener('mouseover', function(e) {
raf = window.requestAnimationFrame(draw);
});
canvas.addEventListener('mouseout', function(e) {
window.cancelAnimationFrame(raf);
});
ball.draw();

這段代碼是一個小球的動畫效果展示。我們通過設置小球的運動軌跡，來實現小球的運動效果，重寫了 draw 函數進行動態變化，同時使用 requestAnimationFrame 作為動畫幀率的控制器。

以上就是 JavaScript 在圖像設計方面的一些例子和用法介紹，希望對大家有所幫助。