html5 怎么实现单击鼠标，记录单击的点，点点之间用直线连接？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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画图本回答被提问者采纳
MFC中单击button并随鼠标移动怎么实现？
对话框上放置一个button ,当鼠标左键单击这个button并持续按下鼠标左键在对话框上移动时，button能随着鼠标的移动而移动即鼠标到哪button就到哪，
当松开鼠标左键时，button停止移动，且button无单击状态变化。这个怎么实现呀，能给出代码参考吗？另外，在对话框以蓝色填充一块矩形，要求button表面上也是这种颜色，但是能正常显示出文字，在拖动button的时候颜色要一直是蓝色，且button要时时可见。有劳大侠们指教了。
VC6中没有WM_MOUSEDRAG呀
按钮的颜色只要在上述的重载里加入属性并重绘即可，可能复杂一些，我有彩色按钮类，颜色相同只要自己制定就行
也可以用WM_MOVE吧，这个具体的你也可以查一下MSDN，上面有很详细的解释！ 参考技术A 也可以用WM_MOUSEMOVE消息函数实现,只是要多用两个变量
我说下过程:
1,定义一个变量 flag;
2.鼠标按下时flag=1,鼠标弹起时flag=2;
3.在WM_MOUSEMOVE函数中,当flag==1是响应这个消息.
4.用((CButton*)(GetDlgItem(IDC_XXXXID)))->MoveWindow(xxx)//参数要自己计算下 IDC_XXXXID这个是按钮ID 参考技术B 你的响应WM_MOUSEDRAG时间，就可以了，重载CButton，然后让那个按钮是CNEWButton的对象就行了。
或者，你不是就像做一个像VB、VC一样的功能么？不如自己写一个ActiveX空间，自己绘图，不就行了么？我听说VB、VC也是这么做的。
呵呵。。。
以上是关于html5 怎么实现单击鼠标，记录单击的点，点点之间用直线连接？的主要内容，如果未能解决你的问题，请参考以下文章
大哥们求助：MFC中OnLButtonDown响应函数中，鼠标左键单击的点（point）的坐标是物理坐标还是逻辑坐标啊？