使用畫布和自定義右鍵菜單

繪圖工具有很多bug，比如畫矩形時(shí)不顯示軌跡

重繪路徑時(shí)也有一些bug，使用Firefox時(shí)也有不保存圖片等bug。

最好用谷歌打開

原代碼如下:

& lthtmllang="en " >

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

邊距:0；

填充:0；

/*不要讓鼠標(biāo)選擇文本*/

-web kit-user-select:none；

-moz-user-select:none；

-ms-user-select:none；

用戶選擇:無；

/*移除滾動(dòng)條*/

overflow-x:隱藏；

overflow-y:隱藏；

}身體{

背景:黑色；

}畫布{

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

邊界半徑:8px

位置:絕對(duì)；

最高:50%；

左:50%；

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

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

}.菜單{

位置:絕對(duì)；

寬度:150像素；

顯示:無；

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

z指數(shù):999；

}.menuul{

寬度:150像素；

}.menuulli{

列表樣式類型:無；

寬度:150像素；

高度:36px

背景:# e4e5e6

框尺寸:邊框；

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

行高:36px

左填充:13px

font-size:14px；

光標(biāo):指針；

}.menuulli:hover{

背景:# 626262；

border-top:1pxsolid # 626262；

顏色:白色；

}.menuulli:第一個(gè)孩子{

背景:線性漸變(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’)；

//自定義菜單標(biāo)志= 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//防止當(dāng)前默認(rèn)事件發(fā)生}

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 '，函數(shù)(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 '，函數(shù)(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 '，函數(shù)(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從標(biāo)頭中刪除一個(gè)值，并返回刪除的值a = arr。shift () arr = [b，c] if (point = = 0) {CTX。begin path()；} else { flag = falsectx.lineTo(point.x，point . y)；//根據(jù)保存的路徑繪制CTX . stroke()；} if(ArrPoint . length & lt；1) { clearInterval(定時(shí)器)；} }，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/>。

戳“看原文！