canvas寫字板功能程式碼例項
分享一段程式碼例項,它利用canvas實現了寫字板功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <canvas id="container" style="background:#666"></canvas> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> var container = document.getElementById('container'); var context = container.getContext('2d'); var paint = false; //判斷是否需要繪畫 var mouseX = 0, mouseY = 0, nowX = 0, nowY = 0; //儲存座標記錄 var position = { reset: function(actionX, actionY, goalX, goalY) { //座標替換 paint = true; var order = "" + actionX + "=" + goalX + "," + actionY + "=" + goalY; eval(order); console.log(order); }, init: function() { //座標清零 console.log("init"); paint = false; mouseX = 0; mouseY = 0; nowX = 0; nowY = 0; } } var canvas = { init: function() { //canvas初始化 context.strokeStyle = "blue"; context.strokeRect(0, 0, 300, 200) }, draw: function(lastX, lastY, nowX, nowY) { //canvas劃線 context.strokeStyle = "yellow"; context.lineWidth = 2; context.beginPath(); context.moveTo(lastX, lastY); context.lineTo(nowX, nowY); context.stroke(); position.reset('mouseX', 'mouseY', nowX, nowY); }, redraw: function() { //canvas重繪 position.init(); }, } $('#container').mousedown(function(e) { position.reset('mouseX', 'mouseY', e.pageX - this.offsetLeft, e.pageY - this.offsetTop); console.log(mouseX + ":" + mouseY); }) $('#container').mousemove(function(e) { if (paint) { console.log(mouseX + ":" + mouseY); position.reset('nowX', 'nowY', e.pageX - this.offsetLeft, e.pageY - this.offsetTop); canvas.draw(mouseX, mouseY, nowX, nowY); } }) $("#container").mouseup(function(e) { if (paint) { position.init(); // canvas.returnData(); } }) $("#container").mouseleave(function(e) { if (paint) { position.init(); } }) </script> </body> </html>
相關文章
- canvas田字格效果程式碼例項Canvas
- canvas實現的七巧板效果程式碼例項Canvas
- canvas實現的簡單塗鴉板程式碼例項Canvas
- canvas實現的七色板程式碼例項Canvas
- canvas實現的簡單畫板效果程式碼例項Canvas
- canvas刮刮樂程式碼例項Canvas
- canvas畫圖程式碼例項Canvas
- canvas小遊戲程式碼例項Canvas遊戲
- canvas火焰效果程式碼例項Canvas
- canvas繪製扇形程式碼例項Canvas
- canvas繪製星星程式碼例項Canvas
- canvas字母雨效果程式碼例項Canvas
- canvas載入效果程式碼例項Canvas
- canvas 繪製雞蛋程式碼例項Canvas
- canvas縮放div程式碼例項Canvas
- canvas擺動效果程式碼例項Canvas
- 數字轉換為漢字大寫形式程式碼例項
- canvas水位進度效果程式碼例項Canvas
- canvas原型鐘錶效果程式碼例項Canvas原型
- canvas氣泡上浮效果程式碼例項Canvas
- canvas繪製網格程式碼例項Canvas
- canvas貪吃蛇遊戲程式碼例項Canvas遊戲
- canvas實現的刮刮樂程式碼例項Canvas
- canvas徑向漸變程式碼例項Canvas
- canvas繪製笑臉程式碼例項Canvas
- canvas繪製圓環效果程式碼例項Canvas
- canvas線性漸變程式碼例項Canvas
- canvas螞蟻線效果程式碼例項Canvas
- 數字轉換為中文大寫例項程式碼
- JavaScript留言板效果程式碼例項JavaScript
- canvas繪製米字旗程式碼例項Canvas
- canvas模擬彈幕效果程式碼例項Canvas
- canvas繪製箭頭效果程式碼例項Canvas
- canvas translate()、scale()和rotate()方法程式碼例項Canvas
- canvas繪製拋物線程式碼例項Canvas線程
- canvas繪製機器貓程式碼例項Canvas
- canvas繪製夜空小屋效果程式碼例項Canvas
- canvas流星劃過星空效果程式碼例項Canvas