87,993
社区成员




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
canvas{
background: #aaaaaa;
margin: 50px;;
}
</style>
</head>
<body >
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
<script>
window.onload = function(e) {
var canvas =document.getElementById('canvas'),
ctx = canvas.getContext('2d');
var m_bMouseDown = false;
var m_ptMouseDown = {}; //鼠标按下的位置
var m_ptMousePos = {}; //鼠标当前的位置
//按下
canvas.onmousedown = function(e) {
m_bMouseDown = true;
var point = ClientToScreen(canvas, e.clientX, e.clientY);
m_ptMouseDown = point;
}
//抬起
canvas.onmouseup = function(e) {
m_bMouseDown = false;
}
//鼠标移动到画布外放开鼠标,
document.onmouseup = function(e) {
m_bMouseDown = false;
}
//移动
canvas.onmousemove = function(e) {
if(m_bMouseDown){
ctx.clearRect(0, 0, canvas.width, canvas.height);
var point = ClientToScreen(canvas, e.clientX, e.clientY);
m_ptMousePos = point;
var left = Math.min(m_ptMouseDown.x, m_ptMousePos.x),
right = Math.max(m_ptMouseDown.x, m_ptMousePos.x),
top = Math.min(m_ptMouseDown.y, m_ptMousePos.y),
bottom = Math.max(m_ptMouseDown.y, m_ptMousePos.y);
ctx.beginPath();
ctx.moveTo(left, top);
ctx.lineTo(right, top)
ctx.lineTo(right, bottom)
ctx.lineTo(left, bottom)
ctx.lineTo(left, top)
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.closePath();
ctx.stroke();
}
}
function ClientToScreen(canvas, x, y){
var rect = canvas.getBoundingClientRect();
return {
x: x - rect.left * (canvas.width / rect.width),
y: y - rect.top * (canvas.height / rect.height)
};
}
}
</script>