Javascript HTML5 Canvas實(shí)現(xiàn)的一個(gè)畫板_

1、Javascript HTML5 Canvas實(shí)現(xiàn)的一個(gè)畫板_ 這篇文章主要介紹了Javascript HTML5 Canvas實(shí)現(xiàn)的一個(gè)畫板的相關(guān)資料,需要的伴侶可以參考下 本文實(shí)例為大家分享了HTML5 Canvas實(shí)現(xiàn)的一個(gè)畫板代碼，供大家參考，具體內(nèi)容如下: !DOCTYPE html html head meta charset=utf-8 titleDEMO6：自定義畫板/title /head body canvas id=canvas width=600 height=300 掃瞄器不支持canvas !- 假如不支持會(huì)顯示這段文字 - /canvas br/ button s

2、tyle=width:80px;background-color:yellow; onclick=linecolor=yellow;YELLOW/button button style=width:80px ;background-color:red; onclick=linecolor=red;RED/button button style=width:80px ;background-color:blue; onclick=linecolor=blue;BLUE/button button style=width:80px ;background-color:green; onclick=

3、linecolor=green;GREEN/button button style=width:80px ;background-color:white; onclick=linecolor=white;WHITE/button button style=width:80px ;background-color:black; onclick=linecolor=black;BLACK/button br/ button style=width: 80px;background-color: white; onclick=linw=4;4PX/button button style=width:

4、 80px;background-color: white; onclick=linw=8;8PX/button button style=width: 80px;background-color: white; onclick=linw=16;16PX/button br/ button style=width: 80px;background-color: white; onclick=copyimage();EXPORT/button br/ img src= id=image_png width=600px height=300px br/ script type=text/javas

5、cript var canvas = document.getElementById(canvas); /獵取標(biāo)簽 var ctx = canvas.getContext(2d); var fillStyle = black; ctx.fillRect(0,0,600,300); var onoff = false; /按下標(biāo)記 var oldx = -10; var oldy = -10; /設(shè)置顏色 var linecolor = white; var linw = 4; canvas.addEventListener(mousemove,draw,true); /鼠標(biāo)移動(dòng)大事 canva

6、s.addEventListener(mousedown,down,false); /鼠標(biāo)按下大事 canvas.addEventListener(mouseup,up,false); /鼠標(biāo)彈起大事 function down(event) onoff = true; oldx = event.pageX - 10; oldy = event.pageY - 10; function up() onoff = false; function draw(event) if (onoff=true) var newx = event.pageX - 10; var newy = event.pageY - 10 ctx.beginPath(); ctx.moveTo(oldx,oldy); ctx.lineTo(newx,newy); ctx.strokeStyle = linecolor; ctx.lineWidth = linw; ctx.lineCap = round; ctx.stroke(); oldx = newx; oldy = newy; function copyimage(event) var img_png_src = canvas.toDataURL(image/png); /將畫板保存為圖