1. Canvas简介：Canvas是HTML5中新增的一个重要的HTML标签，它为了客户端矢量图形而设计的，顾名思义Canvas就是一个画布，你可以在上面画出你想要的任何图形，如果你想设计一个特色的图标，你可以用Canvas，如果你想在客户端绘制一个矢量图你可以选择Canvas。
2. Canvas的例子：
3. Canvas的特殊效果：
今天我要重点介绍的是Canvas可以实现类似于百度地图和googleMap的效果，可以平移，可以缩放，下面的这幅图就可以实现：
说说主要思路和主要的代码：
3.1 平移：
画图就不多介绍了，用canvas可以画出任何你想要的图，平移就是需要移动页面上的元素，那么canvas是个画板，画板不能移动，那如何平移呢？首先需要将我们要画到画板上的元素存储在内存中，鼠标移动的时候，如果移动10个像素，那么我们就把内存中存储的元素全部移动五个像素，操作canvas面板的前提是对面板的任何操作，任何变化都需要重画，，重画的效率是很快的，这个我做过测试，不要把canvas设置太大，只要再屏幕能显示大小就可以了。
$(canvas).bind('mousemove', function (){var scale = canvasConstructor.scale;var x = event.clientX;var y = event.clientY;if (canDrag){var len = canvasDatasets.figures.length;for (var i = 0; i < len; i++){canvasDatasets.figures[i].setPosition(x – lastPosition.x, y – lastPosition.y);}_drawBoard.reDraw();lastPosition.x = x;lastPosition.y = y;return;}}
3.2 缩放：
缩放的道理也是一样，就是需要重画图形
$(canvas).mousewheel(function (event, intDelta){if (enableMousewheel){if (isWheeling){isWheeling = false;var edgeZoomScale = 0;var enable = false;if (intDelta > 0){if (_defaultZoomScale == _defaultMaxScale){isWheeling = true;return;}else{edgeZoomScale = _defaultZoomScale + _defaultZoomIncrement;if (edgeZoomScale > _defaultMaxScale){edgeZoomScale = _defaultMaxScale;}enable = true;}}else if (intDelta <= 0){if (_defaultZoomScale == _defaultMinScale){isWheeling = true;return;}else{edgeZoomScale = _defaultZoomScale – _defaultZoomIncrement;if (edgeZoomScale < _defaultMinScale){edgeZoomScale = _defaultMinScale;}enable = true;}}if (enable){var point = new Point(event.clientX, event.clientY);var ratio = edgeZoomScale / _defaultZoomScale;_defaultZoomScale = edgeZoomScale;_drawBoard.zoomRefresh(ratio, point);parent.setZoomText(_defaultZoomScale);}isWheeling = true;}}});
前段需要添加鼠标的滚轮事件需要引用一个js
<script src="Scirpts/jquery.mousewheel.js" type="text/javascript"></script>
可以去网上下载，引用这个js后，就可以用上面的方式绑定鼠标滚轮的缩放事件了，上图中放大和缩小的按钮也可以实现同样缩放的功能。
intDelta是判断前滚还是后滚动的，具体的逻辑就是将页面上所有图形的左边都同时缩放一定的倍数，倍数可以我们自己控制了，就是ratio，主要的方法就是zoomRefresh，这个方法里面也会调用reDraw。
主要的逻辑和算法我已经讲了，如果还有什么不明白的可以联系我或者给我留言。
有多远，走多远，把足迹连成生命线。
