html5 canvas 画了一条直线，现在鼠标经过这条直线触发某一事件，如何确定鼠标经过这条直线呢？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5 canvas 画了一条直线，现在鼠标经过这条直线触发某一事件，如何确定鼠标经过这条直线呢？相关的知识，希望对你有一定的参考价值。
例如，画了一条直线
ctx.moveTo(450, 400);
ctx.lineTo(500,600)或者ctx.lineTo(450,600);
如何确定鼠标经过了这条直线，只要经过这条直线的任一部分就可以触发事件
求详细一点的代码(js/html5 canvas/,net)或思路。最好有点代码哟O(∩_∩)O
我做的不需要很复杂，没有其它图形，就是仅仅判断鼠标是否经过这条直线的任意位置就可以触发事件就可以，thanks。给点点代码及思路，O(∩_∩)O
参考技术A 封闭路径的话可以使用context.isPointInPath(x,y)html5 怎么实现单击鼠标，记录单击的点，点点之间用直线连接？
点点连线：
<style>*padding: 0;
margin: 0;
#canborder:1px solid #ccc;
</style>
<body>
<canvas id="can" width="600" height="600"></canvas>
</body>
<script>
var _canvas=document.getElementById("can");
var obj=_canvas.getContext("2d");
var arr=[];
_canvas.onclick = function(e)
obj.beginPath();
obj.moveTo(arr[0],arr[1]);
obj.lineTo(e.offsetX,e.offsetY);
obj.stroke();
arr=[];
arr.unshift(e.offsetX);
arr.push(e.offsetY);
</script>
模仿画笔：
#_canvas
background-color: rgb(240,240,240);
</style>
</head>
<body>
<canvas id="_canvas">sorry, your broswer does not support html5!</canvas>
<script type="text/javascript">
var canvas_ = document.getElementById("_canvas");
//全屏
canvas_.setAttribute("width",screen.width);
canvas_.setAttribute("height",screen.height);
var context = canvas_.getContext("2d");
context.strokeStyle = "blue";
context.lineWidth = 4;
var array_paint = [];
var current_y = 0;
var current_x = 0;
//判断鼠标是否按下
var m_down = false;
function paint()
context.beginPath();
context.moveTo(array_paint[0][0],array_paint[0][1]);
if(array_paint.length == 1)
context.lineTo(array_paint[0][0] +1,array_paint[0][1] +1);
else
var i =1;
for(i in array_paint)
context.lineTo(array_paint[i][0],array_paint[i][1]);
context.moveTo(array_paint[i][0],array_paint[i][1]);
context.closePath();
context.stroke();
//按下鼠标
canvas_.onmousedown = function(event)
m_down = true;
current_x = event.offsetX;
current_y = event.offsetY;
array_paint.push([current_x,current_y]);
paint();
//鼠标松开,清空数据
canvas_.onmouseup = function(event)
m_down = false;
array_paint = [];
//鼠标按下后拖动
canvas_.onmousemove = function(event)
if(m_down)
current_x = event.offsetX;
current_y = event.offsetY;
array_paint.push([current_x,current_y]);
paint();
</script>
</body> 参考技术A
so easy!
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" height="500px" width="1000px" style="border:1px solid red;"></canvas>
<script>
let canvas=document.getElementById('myCanvas')
let ctx=canvas.getContext('2d')
canvas.onclick = function(ev)
let x = ev.pageX-canvas.offsetLeft
let y = ev.pageY-canvas.offsetTop
ctx.strokeStyle="#089DB0"
ctx.lineWidth=2;
ctx.arc(x,y,2,0,2*Math.PI)
ctx.stroke()
</script>
</body>
</html> 参考技术B 用js控制canvas画图本回答被提问者采纳
以上是关于html5 canvas 画了一条直线，现在鼠标经过这条直线触发某一事件，如何确定鼠标经过这条直线呢？的主要内容，如果未能解决你的问题，请参考以下文章
你好 你的这个问题 “ html5 canvas 中用鼠标画（拉出）直线的问题！ ”
[js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标