请问在javascript中，鼠标在canvas里面点击，如何确定点击的位置？
2个回答
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* { margin: 0; padding: 0;}
#my-canvas { border: 1px solid red; }
.active {background-color: #e61;color: #fff}
</style>
</head>
<body>
<canvas id="my-canvas" width="500" height="500"></canvas>
<div>
<span>画笔颜色：</span><input type="color" id="line-color" />
<span>画笔宽度：</span><input type="range" id="line-width" max="10" />
<span>橡皮擦：</span><input type="button" id="e" value="橡皮擦" />
<span>画笔的透明度：</span><input type="range" id="opacity" max="10" />
</div>
<script>
/*颜色*/
var oLineColor = document.getElementById("line-color");
/*宽度*/
var oLineWidth = document.getElementById("line-width");
/*橡皮擦*/
var oE = document.getElementById("e");
/*透明度*/
var oOpacity = document.getElementById("opacity");
var oCanvas = document.getElementById("my-canvas");
var context = oCanvas.getContext("2d");
//事件加给canvas
oCanvas.onmousedown=function (ev) {
//每次 画之前。应该开启新的路径
context.beginPath();
//先确认颜色
context.strokeStyle = oLineColor.value;
//确认线条宽度
context.lineWidth = oLineWidth.value;
/*透明度 oOpacity.value (1~10)/10=(0.1~1)*/
context.globalAlpha = oOpacity.value/10;
/*判断用不用橡皮擦*/
if(oE.className=="active"){
context.strokeStyle = "#fff"
}
//鼠标按下的位置
var oldX = ev.offsetX;
var oldY = ev.offsetY;
//让画笔移到鼠标按下的位置
context.moveTo(oldX,oldY);
document.onmousemove=function (ev) {
//鼠标所在的位置
//ev.offsetX
//ev.offsetY
context.lineTo(ev.offsetX,ev.offsetY);
context.stroke();
};
document.onmouseup=function () {
console.log("onmouseup");
document.onmousemove=null;
document.onmouseup =null;
}
};
/*橡皮擦*/
oE.onclick=function () {
if(this.className=="active"){
this.className=""
}else {
this.className="active"
}
//this.className=this.className=="active"?"":"active"
}
//1、橡皮擦的问题
//2、 透明度
</script>
</body>
</html>
给你一个我的代码你参考一下吧。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1、canvas是什么？
2、要获取位置只需要用:window.event.clientX和window.event.clientY，这个窗口位置计算
3、容器的相对位置的情况是event.X和event.Y
4、通过把函数绑定到onclick()函数上就行
2、要获取位置只需要用:window.event.clientX和window.event.clientY，这个窗口位置计算
3、容器的相对位置的情况是event.X和event.Y
4、通过把函数绑定到onclick()函数上就行
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
