用html5的canvas和JavaScript創(chuàng)建一個繪圖程序的簡單

2020-03-24 18:51:11

字體：大中小

來源：轉載

供稿：網(wǎng)友

本文將引導你使用canvas和JavaScript創(chuàng)建一個簡單的繪圖程序。首先準備容器Canvas元素，接下來所有的事情都會在JavaScript里面。XML/HTML Code復制內(nèi)容到剪貼板
canvasid= canvasInAPerfectWorld width= 490 height= 220 /canvas
context=document.getElementById('canvasInAPerfectWorld').getContext( 2d
開始繪圖過程首先我們需要存儲繪圖路徑點坐標，addClick函數(shù)添加坐標點值到數(shù)組JavaScript Code復制內(nèi)容到剪貼板
varclickX=newArray(); varclickY=newArray(); varclickDrag=newArray();//存儲路徑點 varpaint;//是否繪制，mousedown時置為true functionaddClick(x,y,dragging) { clickX.push(x); clickY.push(y); clickDrag.push(dragging); }
redraw函數(shù)每次調(diào)用整個canvas就會重新繪制一次。首先我們清空畫布上內(nèi)容，設置繪制線條顏色粗細線條連接方式。然后兩點之間繪制一段路徑，將數(shù)組中的坐標點依次繪制出來XML/HTML Code復制內(nèi)容到剪貼板
functionredraw(){ context.clearRect(0,0,context.canvas.width,context.canvas.height);//清除畫布內(nèi)容 context.strokeStyle= #df4b26 ;//設置線條顏色 context.lineJoin= round ;//當兩條線條交匯時，創(chuàng)建圓形邊角 context.lineWidth=5;//線條粗細 for(vari=0;i clickX.length;i++){ context.beginPath();//開始一條路徑，或重置當前的路徑 if(clickDrag[i] i){ context.moveTo(clickX[i-1],clickY[i-1]); }else{ context.moveTo(clickX[i]-1,clickY[i]); } context.lineTo(clickX[i],clickY[i]); context.closePath(); context.stroke();//繪制路徑 } }
1 mousedown事件繪圖這點擊到畫布上時，將觸發(fā)該事件執(zhí)行。調(diào)用了addClick函數(shù)，并將paint置為true。JavaScript Code復制內(nèi)容到剪貼板
$('#canvas').mousedown(function(e){ varmouseX=e.pageX-this.offsetLeft; varmouseY=e.pageY-this.offsetTop; paint=true; addClick(e.pageX-this.offsetLeft,e.pageY-this.offsetTop); redraw(); });
2 mousemove事件mousedown中設置的paint為true后，鼠標移動時觸發(fā)mousemove事件執(zhí)行，將鼠標移動的所有點記錄下來，并不斷調(diào)用redraw重繪畫布。
JavaScript Code復制內(nèi)容到剪貼板
if(paint){ addClick(e.pageX-this.offsetLeft,e.pageY-this.offsetTop,true); redraw(); } });
3 mouseup事件mouseup鼠標點擊后松開或者拖拽后松開，表示繪制完成該路徑，將paint置為false。
XML/HTML Code復制內(nèi)容到剪貼板
以上這篇用html5的canvas和JavaScript創(chuàng)建一個繪圖程序的簡單實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持phpstudy。原文地址：http://www.cnblogs.com/fangsmile/archive/2016/07/05/5644611.htmlhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：突襲HTML5之Javascript API擴展5—其他擴展(應用緩存

下一篇：詳解a href=#與 a href=javascript-void(0) 的區(qū)別