在线画板 Canvas在线画图—简单制作一个画板

使用画布和自定义右键菜单

绘图工具有很多bug，比如画矩形时不显示轨迹

重绘路径时也有一些bug，使用Firefox时也有不保存图片等bug。

最好用谷歌打开

原代码如下:

& lthtmllang="en " >

& lthead>。& ltmetacharset="UTF-8 " >;& lttitle>。油漆工具

边距:0；

填充:0；

/*不要让鼠标选择文本*/

-web kit-user-select:none；

-moz-user-select:none；

-ms-user-select:none；

用户选择:无；

/*移除滚动条*/

overflow-x:隐藏；

overflow-y:隐藏；

}身体{

背景:黑色；

}画布{

边框:5px solid # ada 9 a 9；

边界半径:8px

位置:绝对；

最高:50%；

左:50%；

transform:translate(-50%，-50%)；

背景:rgb(235，235，235)；

}.菜单{

位置:绝对；

宽度:150像素；

显示:无；

box-shadow:3px 3px 5px # 88888；

z指数:999；

}.menuul{

宽度:150像素；

}.menuulli{

列表样式类型:无；

宽度:150像素；

高度:36px

背景:# e4e5e6

框尺寸:边框；

border-top:1pxsolid # d0d 0d 0；

行高:36px

左填充:13px

font-size:14px；

光标:指针；

}.menuulli:hover{

背景:# 626262；

border-top:1pxsolid # 626262；

颜色:白色；

}.menuulli:第一个孩子{

背景:线性渐变(90度，黑色，# b1b1 b 1)；

border-top:无；

颜色:白色；

}.颜色{

宽度:35px

高度:20px

} & lt/style>。& lt/head>。& ltbody>。& ltdivclass="menu">。& ltul>。& ltli>。画布工具& lt/li>。& ltli>。画笔颜色

& ltselect name = " sel " class = ' select ' & gt。& ltoptionvalue="1 " >1px<。/option>。& ltoptionvalue="5 " >5px<。/option>。& ltoptionvalue="10 " >10px<。/option>。& ltoptionvalue="15 " >15px<。/option>。& lt/select>。& lt/li>。& ltliclass='line'>。这条线

& lt/html>。

& lt>。窗户。= function(){

var vas = document . query selector(' canvas ')；

var CTX = vas . GetContext(' 2d ')；

var color = document . query selector('。颜色')；

var select = document . query selector('。选择')；

varline = document.querySelector('。线')；

varrect = document.querySelector('。rect ')；

var clear = document . query selector('。clear’)；

varclearAll = document . query selector('。clearAll ')；

varmenu = document.querySelector('。菜单')；

varre draw = document . query selector('。REraW ')；

varsaveAll = document . query selector('。save all’)；

//自定义菜单标志= trueselect . onmousedown = function(){ flagm = false；} select . onmouseout = function(){ flagm = true；} document . oncontext menu = function(e){

vare = e | | window.event//兼容ie menu . style . left = e . PageX+' px '；menu . style . top = e . Pagey+' px '；menu . style . display = ' block '；

returnfalse//防止当前默认事件发生}

document.onclick = function(){

if(flagm){ menu . style . display = ' none '；} }

/* - */vartools = { color: 'black '，lineWd: '1 '，lineWhat: 'line'}

var startx = 0；

var starty = 0；flag = false

vararrPoint =[]；vas . AddEventListener(' mouse down '，函数(e){ flag = true；CTX . BeginPath()；CTX . LineWidth = tools . Linewd；CTX . strokestyle = tools . color；startX = e.offsetXstartY = e.offsetYarr point . push(0)；//tag}) vas。addeventlistener ('mousemove '，函数(e) {

if(flag) {

varX = e.offsetX

varY = e.offsetY

if(tools.lineWhat == 'line') {

//画出线ctx.lineTo(X，Y)；CTX . stroke()；arrPoint.push({ x: X，Y:Y })；//保存绘图路径} else if(tools . line what = = ' clear '){//橡皮擦ctx.clearRect(X，Y，20，20)；} } })vas . addevent listener(' mouse up '，函数(e){ flag = false；

if(tools.lineWhat == 'rect') {

//绘制矩形varendX = e.offsetX

varendY = e.offsetYctx.strokeRect(startX，startY，endX - startX，endY-startY)；arr point . push(0)；//tag}}) vas。addeventlistener ('mouseleave '，function(){ flag = false；arr point . push(0)；//tag })REDRAW . onclick = function(){//REDRAW path//console . log(arr point)；ctx.clearRect(0，0，vas.width，vas . height)；//clear空canvas vartimer = set interval(function(){

var point = ArrPoint . shift()；

// shift从标头中删除一个值，并返回删除的值a = arr。shift () arr = [b，c] if (point = = 0) {CTX。begin path()；} else { flag = falsectx.lineTo(point.x，point . y)；//根据保存的路径绘制CTX . stroke()；} if(ArrPoint . length & lt；1) { clearInterval(定时器)；} }，10)} //下载画布saveAll.onclick = function(){

var src = vas . TotaToul(' image/png '，1)；

varcreate_a = document。(' a ')；create _ a.href = srccreate_a.download = '只是做IT '；//定义下载文件名create _ a . click()；} color . onmousedown = function(){ flagm = false；} color . addevent listener(' mouse leave '，function(){ flagm = true；})color . addevent listener(' change '，function(){ flagm = true；menu . style . display = ' none '；tools . color = this . value；})select . onchange = function(){ tools . LineWd = this . value；flagm = truemenu . style . display = ' none '；} line . onclick = function(){ tools . LineWhat = ' line '；} rect . onclick = function(){ tools . line WhAT = ' rect '；} clear . onclick = function(){ tools . line WhAT = ' clear '；} clearall . onclick = function(){ CTX . clear rect(0，0，vas.width，vas . height)；} } & lt/>。

戳“看原文！