Open Genzhen opened 3 years ago
clip-path 会不会更好呢, css 和 svg 都有
clip-path 会不会更好呢, css 和 svg 都有
@chensiguo 也是可以的
<style>
.circle {
width: 10vw;
height: 10vw;
background: gray;
clip-path: circle();
}
</style>
<div class="circle"></div>
<script>
document.querySelector(".circle").onclick = function () {
alert("ok");
};
</script>
<style>
.circle {
width: 10vw;
height: 10vw;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%25' cy='50%25' r='50%25' fill='gray'/%3E%3C/svg%3E");
}
</style>
<div class="circle"></div>
<script>
document.querySelector(".circle").onclick = function () {
alert("ok");
};
</script>
扫描下方二维码,收藏关注,及时获取答案以及详细解析,同时可解锁800+道前端面试题。
参考实现
border-radius
canvas 是 HTML5 提供的,用来在浏览器中创建图形,它可以通过 JavaScript 绘制 2D 图形。
因此我们可以通过用 canvas 在浏览器中绘制一个圆形,然后给这个圆形添加区域内点击事件即可实现。