在網頁設計中，有時候我們需要將圖片展示為圓形，這樣可以使頁面看起來更加美觀和時尚。下面我們來介紹幾種方法如何在HTML中設置圖片為圓形。

//方法一：通過CSS設置圓形圖片
img {
border-radius: 50%;
}
//方法二：通過SVG設置圓形圖片
<svg width="100" height="100">
<clipPath id="circle">
<circle cx="50" cy="50" r="50" />
</clipPath>
</svg>
<img src="image.jpg" clip-path="url(#circle)">
//方法三：通過canvas設置圓形圖片
<canvas id="canvas" width="100" height="100"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 50;
context.save();
context.beginPath();
context.arc(x, y, radius, 0, Math.PI * 2, false);
context.closePath();
context.clip();
context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(x, y, radius, 0, Math.PI * 2, false);
context.lineWidth = 5;
context.strokeStyle = '#fff';
context.stroke();
context.restore();
};
imageObj.src = 'image.jpg';
</script>

以上是幾種在HTML中設置圖片為圓形的方法，可以根據自己的需求進行選擇。希望這篇文章能對你有所幫助。