Javascript HTML5 Canvas實(shí)現(xiàn)的一個(gè)畫板
更新時(shí)間:2020年04月12日 11:13:42 作者:suvllian
這篇文章主要為大家詳細(xì)介紹了Javascript HTML5 Canvas實(shí)現(xiàn)的一個(gè)畫板的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了HTML5 Canvas實(shí)現(xiàn)的一個(gè)畫板代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DEMO6:自定義畫板</title> </head> <body> <canvas id="canvas" width="600" height="300"> 瀏覽器不支持canvas <!-- 如果不支持會(huì)顯示這段文字 --> </canvas> <br/> <button style="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='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: 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/javascript"> 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)事件 canvas.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"); //將畫板保存為圖片格式的函數(shù) document.getElementById("image_png").src = img_png_src; } </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:
- js+canvas實(shí)現(xiàn)畫板功能
- JS實(shí)現(xiàn)canvas簡(jiǎn)單小畫板功能
- javascript+Canvas實(shí)現(xiàn)畫板功能
- javascript實(shí)現(xiàn)畫板功能
- javascript簡(jiǎn)易畫板開發(fā)
- JS基于ocanvas插件實(shí)現(xiàn)的簡(jiǎn)單畫板效果代碼(附demo源碼下載)
- html5+javascript制作簡(jiǎn)易畫板附圖
- 純js網(wǎng)頁(yè)畫板(Graphics)類簡(jiǎn)介及實(shí)現(xiàn)代碼
- 用javascript實(shí)現(xiàn)畫板的代碼
- JS canvas實(shí)現(xiàn)畫板和簽字板功能
相關(guān)文章
JavaScript+CSS相冊(cè)特效實(shí)例代碼
下面小編就為大家?guī)?lái)一篇JavaScript+CSS相冊(cè)特效實(shí)例代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-09-09JS實(shí)現(xiàn)簡(jiǎn)單的Canvas畫圖實(shí)例
這篇文章介紹了JS實(shí)現(xiàn)簡(jiǎn)單的Canvas畫圖實(shí)例代碼,有需要的朋友可以參考一下2013-07-07Electron中實(shí)現(xiàn)大文件上傳和斷點(diǎn)續(xù)傳功能
Electron是開源的框架,可以使用h5來(lái)開發(fā)跨平臺(tái)pc桌面應(yīng)用,這樣前端開發(fā)這可以開發(fā)桌面應(yīng)用了。這篇文章主要介紹了Electron中實(shí)現(xiàn)大文件上傳和斷點(diǎn)續(xù)傳功能,需要的朋友可以參考下2018-10-10使用contextMenu插件實(shí)現(xiàn)Bootstrap table彈出右鍵菜單
如今Bootstrap這個(gè)前端框架已被許多人接受并應(yīng)用在不同的項(xiàng)目中,其中“開發(fā)高效,設(shè)備兼容”的特點(diǎn)表現(xiàn)得非常明顯。這篇文章主要介紹了使用contextMenu插件實(shí)現(xiàn)Bootstrap table彈出右鍵菜單,需要的朋友可以參考下2017-02-02