html5在线画图工具,HTML5 Canvas画板画图工具 可定义笔刷和画布

本文作者html5tricks，转载请注明出处

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

HTML代码：

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(