您的位置：首页 > 其它

用canvas实现鼠标拖动绘制矩形框

2016-12-20 15:38 651 查看

需要用到jCanvas插件和jQuery。

jCanvas下载:https://raw.githubusercontent.com/caleb531/jcanvas/master/jcanvas.min.js

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标拖动绘制矩形框(canvas)</title>
</head>
<body>

<canvas id="canvas" width="600" height="300" style="border: 1px solid #000;"></canvas>

<script src="./jquery-1.11.3.min.js"></script>
<script src="./jcanvas.min.js"></script>
<script>
var layer=0;
CanvasExt = {
drawRect:function(canvasId,penColor,strokeWidth){
var that=this;
that.penColor=penColor;
that.penWidth=strokeWidth;

var canvas=document.getElementById(canvasId);
//canvas 的矩形框
var canvasRect = canvas.getBoundingClientRect();
//矩形框的左上角坐标
var canvasLeft=canvasRect.left;
var canvasTop=canvasRect.top;

var layerIndex=layer;
var layerName="layer";
var x=0;
var y=0;

//鼠标点击按下事件，画图准备
canvas.onmousedown=function(e){
//设置画笔颜色和宽度
var color=that.penColor;
var penWidth=that.penWidth;

layerIndex++;
layer++;
layerName+=layerIndex;
x = e.clientX-canvasLeft;
y = e.clientY-canvasTop;

$("#"+canvasId).addLayer({
type: 'rectangle',
strokeStyle: color,
strokeWidth: penWidth,
name:layerName,
fromCenter: false,
x: x, y: y,
width: 1,
height: 1
});

$("#"+canvasId).drawLayers();
$("#"+canvasId).saveCanvas();
//鼠标移动事件，画图
canvas.onmousemove=function(e){
width = e.clientX-canvasLeft-x;
height = e.clientY-canvasTop-y;

$("#"+canvasId).removeLayer(layerName);

$("#"+canvasId).addLayer({
type: 'rectangle',
strokeStyle: color,
strokeWidth: penWidth,
name:layerName,
fromCenter: false,
x: x, y: y,
width: width,
height: height
});

$("#"+canvasId).drawLayers();
}
};

canvas.onmouseup=function(e){

var color=that.penColor;
var penWidth=that.penWidth;

canvas.onmousemove=null;

width = e.clientX-canvasLeft-x;
height = e.clientY-canvasTop-y;

$("#"+canvasId).removeLayer(layerName);

$("#"+canvasId).addLayer({
type: 'rectangle',
strokeStyle: color,
strokeWidth: penWidth,
name:layerName,
fromCenter: false,
x: x, y: y,
width: width,
height: height
});

$("#"+canvasId).drawLayers();
$("#"+canvasId).saveCanvas();
}
}
};

drawPen();
function drawPen(){
var color = "red";
var width = 1;
CanvasExt.drawRect("canvas",color,width);
}

</script>
</body>
</html>

效果大概如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航