正文

今天我们要来分享一些HTML5干货，对于前段开发者来说，这些HTML5应用和jQuery插件将会让你的项目更加生动和炫丽，至少在UI设计方面，或多或少会带给你一点设计灵感，赶紧收藏和分享吧。另外这些HTML5应用的源代码也一并分享了。

HTML5 Canvas画板画图工具 可定义笔刷和画布

这是一款基于HTML5 Canvas的网络画板应用，简化版的，可以自己在上面扩展。

核心jQuery代码：

function prepareCanvas() { 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"); 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"; $('#canvas').mousedown(function(e) { 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; } } } { 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; }); } View Code

在线演示 源码下载

HTML5/CSS3滑块动画菜单 图标动画很酷

非常实用的鼠标跟随滑动菜单，挺不错的。