<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>
<--可自定义为按钮增加点击事件函数-->


var clickRightHtml = document.getElementById("clickRightMenu");
var canvas = document.getElementById("canvasId");
clickRightHtml.style.display = "none";//每次右键都要把之前显示的菜单隐藏哦
canvas.oncontextmenu = function(event){
    var event = event || window.event;
    clickRightHtml.style.display = "block";
    clickRightHtml.style.left = event.clientX + "px";
    clickRightHtml.style.top = event.clientY + "px";
    return false;//屏蔽浏览器自带的右键菜单
};