canvas学习相关的一点东西_H5之家 - 中国HTML5教程资源分享第一站

<!DOCTYPE html> <html> <head> <style> canvas { border: 1px dashed black; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> </head> <body> <canvas></canvas> <div> <div></div> </div> <script> context = document.getElementById(‘canvas‘).getContext("2d"); $(‘#canvas‘).mousedown(function(e){ console.log(e); var mouseX = e.pageX - this.offsetLeft; var mouseY = e.pageY - this.offsetTop; paint = true; addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop); redraw(); }); $(‘#canvas‘).mousemove(function(e){ if(paint){ addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true); redraw(); } }); $(‘#canvas‘).mouseup(function(e){ paint = false; }); $(‘#canvas‘).mouseleave(function(e){ paint = false; }); var clickX = new Array(); var clickY = new Array(); var clickDrag = new Array(); var paint; function addClick(x, y, dragging) { clickX.push(x); clickY.push(y); clickDrag.push(dragging); } function redraw(){ context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas context.strokeStyle = "#df4b26"; context.lineJoin = "round"; context.lineWidth = 5; for(var i=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(); } } </script> </body> </html>