Javascript HTML5画布问题

是否有一种方法可以阻止用户向下拖动鼠标，这样他们只能单击鼠标，而不是单击并拖动鼠标。我希望htem只在画布上画点，或者我定义的任何类似于图章工具的图案

function Sketcher( canvasID, brushImage ) {
this.renderFunction = (brushImage == null || brushImage == undefined) ? this.updateCanvasByLine : this.updateCanvasByBrush;
this.brush = brushImage;
this.touchSupported = Modernizr.touch;
this.canvasID = canvasID;
this.canvas = $("#"+canvasID);
this.context = this.canvas.get(0).getContext("2d"); 
this.context.strokeStyle = "#000000";
this.context.lineWidth = 3;
this.lastMousePoint = {x:0, y:0};

if (this.touchSupported) {
    this.mouseDownEvent = "touchstart";
    this.mouseMoveEvent = "touchmove";
    this.mouseUpEvent = "touchend";
}
else {
    this.mouseDownEvent = "mousedown";
    this.mouseMoveEvent = "mousemove";
    this.mouseUpEvent = "mouseup";
}

this.canvas.bind( this.mouseDownEvent, this.onCanvasMouseDown() );
 }

 Sketcher.prototype.onCanvasMouseDown = function () {
var self = this;
return function(event) {
    self.mouseMoveHandler = self.onCanvasMouseMove()
    self.mouseUpHandler = self.onCanvasMouseUp()

    $(document).bind( self.mouseMoveEvent, self.mouseMoveHandler );
    $(document).bind( self.mouseUpEvent, self.mouseUpHandler );

    self.updateMousePosition( event );
    self.renderFunction( event );
}
 }

  Sketcher.prototype.onCanvasMouseMove = function () {
var self = this;
return function(event) {

    self.renderFunction( event );
    event.preventDefault();
    return false;
}
}

Sketcher.prototype.onCanvasMouseUp = function (event) {
var self = this;
return function(event) {

    $(document).unbind( self.mouseMoveEvent, self.mouseMoveHandler );
    $(document).unbind( self.mouseUpEvent, self.mouseUpHandler );

    self.mouseMoveHandler = null;
    self.mouseUpHandler = null;
}
}

Sketcher.prototype.updateMousePosition = function (event) {
var target;
if (this.touchSupported) {
    target = event.originalEvent.touches[0]
}
else {
    target = event;
}

var offset = this.canvas.offset();
this.lastMousePoint.x = target.pageX - offset.left;
this.lastMousePoint.y = target.pageY - offset.top;

}

Sketcher.prototype.updateCanvasByLine = function (event) {

this.context.beginPath();
this.context.moveTo( this.lastMousePoint.x, this.lastMousePoint.y );
this.updateMousePosition( event );
this.context.lineTo( this.lastMousePoint.x, this.lastMousePoint.y );
this.context.stroke();
}

 Sketcher.prototype.updateCanvasByBrush = function (event) {
var halfBrushW = this.brush.width/2;
var halfBrushH = this.brush.height/2;

var start = { x:this.lastMousePoint.x, y: this.lastMousePoint.y };
this.updateMousePosition( event );
var end = { x:this.lastMousePoint.x, y: this.lastMousePoint.y };

var distance = parseInt( Trig.distanceBetween2Points( start, end ) );
var angle = Trig.angleBetween2Points( start, end );

var x,y;

for ( var z=0; (z<=distance || z==0); z++ )
{
    x = start.x + (Math.sin(angle) * z) - halfBrushW;
    y = start.y + (Math.cos(angle) * z) - halfBrushH;
    //console.log( x, y, angle, z );
    this.context.drawImage(this.brush, x, y);
}
}

 Sketcher.prototype.toString = function () {

var dataString = this.canvas.get(0).toDataURL("image/png");
var index = dataString.indexOf( "," )+1;
dataString = dataString.substring( index );

return dataString;
}

Sketcher.prototype.toDataURL = function () {

var dataString = this.canvas.get(0).toDataURL("image/png");
return dataString;
}

 Sketcher.prototype.clear = function () {

var c = this.canvas[0];
this.context.clearRect( 0, 0, c.width, c.height );
}

function Sketcher（canvasID、brushImage）{
this.renderFunction=（brushImage==null | | brushImage==未定义）？this.updateCanvasByLine:this.updateCanvasByBrush；
this.brush=brushImage；
this.touchSupported=modernizer.touch；
this.canvasID=canvasID；
this.canvas=$（“#”+canvasID）；
this.context=this.canvas.get（0）.getContext（“2d”）；
this.context.strokeStyle=“#000000”；
this.context.lineWidth=3；
this.lastMousePoint={x:0，y:0}；
如果（支持此.touch）{
this.mouseDownEvent=“touchstart”；
this.mousemovevent=“touchmove”；
this.mouseUpEvent=“touchend”；
}
否则{
this.mouseDownEvent=“mousedown”；
this.mousemovevent=“mousemove”；
this.mouseUpEvent=“mouseup”；
}
this.canvas.bind（this.mouseDownEvent，this.onCanvasMouseDown（））；
}
Sketcher.prototype.onCanvasMouseDown=函数（）{
var self=这个；
返回函数（事件）{
self.mouseMoveHandler=self.onCanvasMouseMove（）
self.mouseuphHandler=self.onCanvasMouseUp（）
$（document）.bind（self.mousemovevent，self.mouseMoveHandler）；
$（document）.bind（self.mouseUpEvent，self.mouseUpHandler）；
self.updateMousePosition（事件）；
self.renderFunction（事件）；
}
}
Sketcher.prototype.onCanvasMouseMove=函数（）{
var self=这个；
返回函数（事件）{
self.renderFunction（事件）；
event.preventDefault（）；
返回false；
}
}
Sketcher.prototype.onCanvasMouseUp=函数（事件）{
var self=这个；
返回函数（事件）{
$（文档）.unbind（self.mousemovevent，self.mouseMoveHandler）；
$（文档）.unbind（self.mouseUpEvent，self.mouseUpHandler）；
self.mouseMoveHandler=null；
self.mouseHandler=null；
}
}
Sketcher.prototype.updateMousePosition=函数（事件）{
var目标；
如果（支持此.touch）{
target=event.originalEvent.touchs[0]
}
否则{
目标=事件；
}
var offset=this.canvas.offset（）；
this.lastMousePoint.x=target.pageX-offset.left；
this.lastMousePoint.y=target.pageY-offset.top；
}
Sketcher.prototype.updateCanvasByLine=函数（事件）{
this.context.beginPath（）；
this.context.moveTo（this.lastMousePoint.x，this.lastMousePoint.y）；
此.updateMousePosition（事件）；
this.context.lineTo（this.lastMousePoint.x，this.lastMousePoint.y）；
this.context.stroke（）；
}
Sketcher.prototype.updateCanvasByBrush=函数（事件）{
var halfBrushW=this.brush.width/2；
var halfbrush=this.brush.height/2；
var start={x:this.lastMousePoint.x，y:this.lastMousePoint.y}；
此.updateMousePosition（事件）；
var end={x:this.lastMousePoint.x，y:this.lastMousePoint.y}；
var distance=parseInt（两点之间的触发距离（起点、终点））；
变量角度=两点之间的触发角度（起点、终点）；
变量x，y；
对于（var z=0；（z您可以通过忽略
mousemove
和
mouseup
事件处理程序来实现这一点，方法是不初始化它们或使用标志指示您处于stamp模式

您所需要的只是：

canvas.onmousedown = function(e) {
    var pos = getMousePos(e);
    render(pos.x, pos.y);
}

就是这样，它的工作原理与触摸事件类似

要使用标志（我不建议始终添加和删除处理程序）：

和mouse-up类似（但不是真正必要的，除非它取决于您在mousedown中的操作）


希望这有帮助

var isStampMode = true;

canvas.onmousemove = function(e) {
    if (isStampMode) return;

    ...
}