如何在canvas画布上自定义鼠标右键菜单内容？

最新推荐文章于 2024-09-13 16:53:17 发布

置顶

芒果好好吃

最新推荐文章于 2024-09-13 16:53:17 发布

阅读量5.3k

点赞数 2

文章标签： canvas 鼠标右键

本文链接：https://blog.csdn.net/hi_lemon/article/details/88554641

版权

这篇博客讲述了如何在canvas画布上响应鼠标右键点击事件，通过自定义HTML菜单并利用oncontextmenu方法控制菜单的显示和隐藏，以满足用户在画布上的快捷操作需求。

摘要由CSDN通过智能技术生成

用户大大提了一个需求，想要在画布上能够右键快捷点击使用某个功能，小菜鸟肯定要满足啊（委屈脸），然后靠着强大的各路神仙，写下了如下代码，终于实现了，为自己放个烟花~~~不喜勿喷哦~

1.自定义鼠标右键菜单html，默认不显示，display: none;

<style>
	.clickRightMenu{
	    width: 110px;
	    background-color: #fff;
	    font-size: 12px;
	    position: absolute;
	    text-align: left;
	    padding: 2px 0;
	    border:1px solid #ccc;
	    display: none;
	    z-index: 100;
	}
	.clickRightMenu li{
	    list-style: none;
	    line-height: 20px;
	    padding-left: 25px;
	}
	.clickRightMenu li:hover{
	    background-color: #dcdcdc;
	    cursor: pointer;
	}
</style>
<ul class="clickRightMenu" id="clickRightMenu">
	<li>保存</li>
	<li>取消</li>
</ul>
<canvas id="canvasId" width="400" height="400" style="border: 1px solid #ccc;"></canvas>
<--可自定义为按钮增加点击事件函数-->

2.使用o