！声明文档类型

超文本标记语言

头

meta charset='UTF-8 '

标题画布画板制作/title

元名称='关键字'内容='画布画板制作' /

元名称='描述'内容='画布画板制作' /

链接rel='样式表href='css/style.css '

/head

身体

脚本src=' http://www .5 iweb。com。cn/statics/js/jquery。1 .7 .1 .量滴js '/脚本

canvas id=' canvas ' width=300 height=300/canvas/br

按钮id='pen '画图/按钮

按钮id='橡皮擦'橡皮擦/按钮

脚本src=' js/index。js '/脚本

/body

/html

钢性铸铁部分：

正文{背景色：象牙；}

画布{border:1px纯红；}

射流研究…部分：

var canvas=文档。getelementbyid(' canvas ')；

var CTX=画布。GetContext(' 2d ')；

var lastX

var lastY

var strokeColor='红色

变化笔画宽度=5；

var mouseX

var mouseY

var canvasofset=$(' # canvas ').offset()；

var offsetX=canvasOffset.left

var offsetY=canvasOffset.top

var isMouseDown=false

函数handleMouseDown(e){

MouseX=ParSeint(e . ClientX-OffSetX)；

MouseY=Parseint(e . clienti-offset secty)；

//把鼠标放下来

lastX=mouseX

lastY=mouseY

isMouseDown=true

}

函数handleMouseUp(e){

MouseX=ParSeint(e . ClientX-OffSetX)；

MouseY=Parseint(e . clienti-offset secty)；

//把鼠标放在这里

isMouseDown=false

}

函数handleMouseOut(e){

MouseX=ParSeint(e . ClientX-OffSetX)；

MouseY=Parseint(e . clienti-offset secty)；

//把鼠标放在这里

isMouseDown=false

}

函数handleMouseMove(e){

MouseX=ParSeint(e . ClientX-OffSetX)；

MouseY=Parseint(e . clienti-offset secty)；

//把你的鼠标移到这里

if(isMouseDown){

CTX。begin path()；

if(mode=='pen'){

CTX。global composite operation=' source-over '；

ctx.moveTo(lastX，LasTy)；

ctx.lineTo(mouseX，Mousey)；

CTX。stroke()；

}else{

CTX。global composite operation=' destination-out "；

ctx.arc(lastX，lastY，8，0，Math .PI*2，假);

CTX。fill()；

}

lastX=mouseX

lastY=mouseY

}

}

$('#canvas ').mousedown(函数{ HandleMouseDown(e)；});

$('#canvas ').mousemove(函数(e){ HandleMouseMoVE(e)；});

$('#canvas ').mouseup(函数{ HandleMouseUp(e)；});

$('#canvas ').mouseout(函数{ HandleMouseOut(e)；});

var mode=' pen

$('#pen ').click(function(){ mode=' pen '；});

$(' #橡皮擦')。单击(function(){ mode='橡皮擦；});