html5 canvas 簡單畫板實作程式碼_html5教學技巧

效果圖：

註：下面的程式碼運作效果，請在支援html5瀏覽下執行，才能看到效果。

; <title>canvas簡單畫板</title> #can{ 寬度：600px;高度：500px；邊框：1px實線#ccc；頂部邊距：0px；左邊距：20px；} 風格> 頭> <h2 style="padding-left:20px">canvas簡單畫板</h2> <canvas id="can" width="600" height="500"></canvas> 函數 getBodyOffsetTop(el){ var 頂部 = 0; 做{ 頂部 = 頂部 el.offsetTop; }while(el = el.offsetParent); 返回頂部； } 函數 getBodyOffsetLeft(el){ 左變數 = 0; 做{ 左 = 左 el.offsetLeft; }while(el = el.offsetParent); 向左返回； } 函數繪圖（畫布，選項）{ typeof canvas == 'string' && (canvas = document.getElementById(canvas)); if(!canvas || !canvas.getContext){ throw new Error(100,'不支援畫布！'); } 這個.選項 = { 顏色:['#000000','#ff0000','#00ff00','#0000ff','#00ffff','#7fef02','#4488bb'] }; this.setOption(選項); this.init(畫布); } 繪圖.原型 = { 設定選項：函數（選項）{ typeof 選項 == '物件' || （選項={}）； for(選項中的var i){ 開關（一）{ 案例“顏色”： this.option[i] = 選項[i]; 休息; } } }, 初始化：函數（畫布）{ this.canvas = 畫布; this.context = canvas.getContext('2d'); this.context.lineWidth = 1; this.context.lineJons = '圓形'; this.context.lineCep = '圓形'; this.isButtonDown = false; this.historyStroker = []; this.curStroker = {顏色:'#000000',路徑:[]}; this.lastX = 0; this.lastY = 0; this.curColor = '#000000'; this.toolbarspos ={}; this.bindEvent(); this.ResetDrawToolbar(); }, 綁定事件：函數（）{ var self = this; this.canvas.addEventListener('mousemove',function(event){ var x = event.pageX-getBodyOffsetLeft(this), y = event.pageY-getBodyOffsetTop(this); self.onMouseMove({x:x,y:y}); }，錯誤的）; this.canvas.addEventListener('mousedown',function(event){ var x = event.pageX-getBodyOffsetLeft(this), y = event.pageY-getBodyOffsetTop(this); self.onMouseDown(事件,{x:x,y:y}); }，錯誤的）; this.canvas.addEventListener('mouseup',function(event){ var x = event.pageX-getBodyOffsetLeft(this), y = event.pageY-getBodyOffsetTop(this); self.onMouseUp(事件,{x:x,y:y}); }，錯誤的）; this.canvas.addEventListener('點擊',函數(事件){ var x = event.pageX-getBodyOffsetLeft(this), y = event.pageY-getBodyOffsetTop(this); self.onClick({x:x,y:y}); }，錯誤的）; }, onMouseMove:函數(位置){ if(this.isButtonDown){ var p = this.toolbarspos; for(var i in p){ if(pos.x >= p[i].x && pos.x = p[i].y && pos.y = p[i].x && pos.x = p[i].y && pos.y = p[i].x && pos.x = p[i].y && pos.y = p[i].x && pos.x = p[i].y && pos.y 內文>

提示：您可以先修改部分程式碼再執行