在今天的HTML教程里，我们要学习一下如何使用HTML5 Canvas实现一个超酷而又简单的网络画板功能。在这个教程中，我们可以选择笔刷的类型、笔刷的大小以及笔刷的颜色，当然作为画板还需要很多功能，这里只是最基本的绘制功能，大家可以自己实现类似矩形、椭圆等复杂元素的绘制。

DEMO演示

下面我们来简单地分析一下实现这个HTML5网页画板的原理及代码，代码由HTML以及Javascript组成，主要还是Javascript代码。

HTML代码： <div> <div></div> </div>

HTML代码非常简单，仅仅是构造了一个canvas容器，我们的画板就在这个地方生成。

Javascript代码：

首先我们通过一组变量来定义画板的样式，以及一些数据的初始化：

var canvas; var context; var canvasWidth = 490; var canvasHeight = 220; var padding = 25; var lineWidth = 8; var colorPurple = "#cb3594"; var colorGreen = "#659b41"; var colorYellow = "#ffcf33"; var colorBrown = "#986928"; var outlineImage = new Image(); var crayonImage = new Image(); var markerImage = new Image(); var eraserImage = new Image(); var crayonBackgroundImage = new Image(); var markerBackgroundImage = new Image(); var eraserBackgroundImage = new Image(); var crayonTextureImage = new Image(); var clickX = new Array(); var clickY = new Array(); var clickColor = new Array(); var clickTool = new Array(); var clickSize = new Array(); var clickDrag = new Array(); var paint = false; var curColor = colorPurple; var curTool = "crayon"; var curSize = "normal"; var mediumStartX = 18; var mediumStartY = 19; var mediumImageWidth = 93; var mediumImageHeight = 46; var drawingAreaX = 111; var drawingAreaY = 11; var drawingAreaWidth = 267; var drawingAreaHeight = 200; var toolHotspotStartY = 23; var toolHotspotHeight = 38; var sizeHotspotStartY = 157; var sizeHotspotHeight = 36; var sizeHotspotWidthObject = new Object(); sizeHotspotWidthObject.huge = 39; sizeHotspotWidthObject.large = 25; sizeHotspotWidthObject.normal = 18; sizeHotspotWidthObject.small = 16; var totalLoadResources = 8; var curLoadResNum = 0;

接下来开始准备画布，也就是初始化Canvas对象：

function prepareCanvas() { // Create the canvas (Neccessary for IE because it doesn't know what a canvas element is) var canvasDiv = document.getElementById('canvasDiv'); canvas = document.createElement('canvas'); canvas.setAttribute('width', canvasWidth); canvas.setAttribute('height', canvasHeight); canvas.setAttribute('id', 'canvas'); canvasDiv.appendChild(canvas); if(typeof G_vmlCanvasManager != 'undefined') { canvas = G_vmlCanvasManager.initElement(canvas); } context = canvas.getContext("2d"); // Grab the 2d canvas context // Note: The above code is a workaround for IE 8 and lower. Otherwise we could have used: // context = document.getElementById('canvas').getContext("2d"); // Load images // ----------- crayonImage.onload = function() { resourceLoaded(); }; crayonImage.src = "images/crayon-outline.png"; //context.drawImage(crayonImage, 0, 0, 100, 100); markerImage.onload = function() { resourceLoaded(); }; markerImage.src = "images/marker-outline.png"; eraserImage.onload = function() { resourceLoaded(); }; eraserImage.src = "images/eraser-outline.png"; crayonBackgroundImage.onload = function() { resourceLoaded(); }; crayonBackgroundImage.src = "images/crayon-background.png"; markerBackgroundImage.onload = function() { resourceLoaded(); }; markerBackgroundImage.src = "images/marker-background.png"; eraserBackgroundImage.onload = function() { resourceLoaded(); }; eraserBackgroundImage.src = "images/eraser-background.png"; crayonTextureImage.onload = function() { resourceLoaded(); }; crayonTextureImage.src = "images/crayon-texture.png"; outlineImage.onload = function() { resourceLoaded(); }; outlineImage.src = "images/watermelon-duck-outline.png"; // Add mouse events // ---------------- $('#canvas').mousedown(function(e) { // Mouse down location var mouseX = e.pageX - this.offsetLeft; var mouseY = e.pageY - this.offsetTop; if(mouseX < drawingAreaX) // Left of the drawing area { if(mouseX > mediumStartX) { if(mouseY > mediumStartY && mouseY < mediumStartY + mediumImageHeight){ curColor = colorPurple; }else if(mouseY > mediumStartY + mediumImageHeight && mouseY < mediumStartY + mediumImageHeight * 2){ curColor = colorGreen; }else if(mouseY > mediumStartY + mediumImageHeight * 2 && mouseY < mediumStartY + mediumImageHeight * 3){ curColor = colorYellow; }else if(mouseY > mediumStartY + mediumImageHeight * 3 && mouseY < mediumStartY + mediumImageHeight * 4){ curColor = colorBrown; } } } else if(mouseX > drawingAreaX + drawingAreaWidth) // Right of the drawing area { if(mouseY > toolHotspotStartY) { if(mouseY > sizeHotspotStartY) { var sizeHotspotStartX = drawingAreaX + drawingAreaWidth; if(mouseY < sizeHotspotStartY + sizeHotspotHeight && mouseX > sizeHotspotStartX) { if(mouseX < sizeHotspotStartX + sizeHotspotWidthObject.huge){ curSize = "huge"; }else if(mouseX < sizeHotspotStartX + sizeHotspotWidthObject.large + sizeHotspotWidthObject.huge){ curSize = "large"; }else if(mouseX < sizeHotspotStartX + sizeHotspotWidthObject.normal + sizeHotspotWidthObject.large + sizeHotspotWidthObject.huge){ curSize = "normal"; }else if(mouseX < sizeHotspotStartX + sizeHotspotWidthObject.small + sizeHotspotWidthObject.normal + sizeHotspotWidthObject.large + sizeHotspotWidthObject.huge){ curSize = "small"; } } } else { if(mouseY < toolHotspotStartY + toolHotspotHeight){ curTool = "crayon"; }else if(mouseY < toolHotspotStartY + toolHotspotHeight * 2){ curTool = "marker"; }else if(mouseY < toolHotspotStartY + toolHotspotHeight * 3){ curTool = "eraser"; } } } } else if(mouseY > drawingAreaY && mouseY < drawingAreaY + drawingAreaHeight) { // Mouse click location on drawing area } paint = true; addClick(mouseX, mouseY, false); redraw(); }); $('#canvas').mousemove(function(e){ if(paint==true){ addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true); redraw(); } }); $('#canvas').mouseup(function(e){ paint = false; redraw(); }); $('#canvas').mouseleave(function(e){ paint = false; }); }

看起来很复杂，前面主要是初始化canvas的背景图片，后面主要是初始化画笔事件，像click、mouseup、mouseleave等鼠标事件。