本文实例分享了html5 canvas可拖动省份的中国地图实现方法，供大家参考，具体内容如下
鼠标移动事件：根据点击的省份名，获得数据，并实时重绘移动层的省份
$('#eventCanvas')mousemove(function(ev){var mouseX, mouseY;
if(evlayerX || evlayerX==0){
mouseX = evlayerX;
mouseY = evlayerY;
}else if(evoffsetX || evoffsetX==0){
mouseX = evoffsetX;
mouseY = evoffsetY;
}
if(draging){
if(optsdragAll){ <span style="font-family: Arial, Helvetica, sans-serif;">//拖动整个地图，存在问题，地图画的太慢</span>
mapContextclearRect(0, 0, 1100, 630);
for(var i = 0;i < allZoneDatalength;i++){
for(var j = 0;j < allData[allZoneData[i]name]length;j++){ //allData是第一次读取数据时放到内存里的变量，它包含了所有数据
pubFunsdrawMap(mapContext,allData[allZoneData[i]name][j],mouseX - tempX, mouseY - tempY);
}
}
}else{
moveMapContextclearRect(0, 0, 1100, 630);
pubFunsdrawMoveLayerLine(mouseX - tempX, mouseY - tempY);
}
}
});
鼠标抬起事件：设置dragging为false，clear移动层。
$('#eventCanvas')mouseup(function(e){if(optsdragAll){
}else{
moveMapContextclearRect(0, 0, 1100, 630);
}
draging = false;
});
小结：功能、原理都很简单，但能熟悉canvas的一些属性和方法。canvas层是可以重叠到一起的，这样就可以在不同的层画不同的内容，方便维护和管理。
以上就是本文的全部内容，希望对大家的学习有所帮助。
HTML5 的 Canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
Canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
Canvas 是逐像素进行渲染的。
在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
- 依赖分辨率
- 不支持事件处理器
-弱的文本渲染能力
- 能够以 png 或 jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
-不依赖分辨率
- 支持事件处理器
-最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
当我们在绘制的一个元素（文字、图形）的时候，首先要对这个元素规定它的颜色，文字字体，然后在进行绘制，不然不会生效。
场景 ：假设您有一个游戏，其UI位于顶部，中间是游戏性动作，底部是静态背景。
方法 ：可以将游戏分成三个<canvas>层。 UI将仅在用户输入时发生变化，游戏层随每个新框架发生变化，并且背景通常保持不变
好处 ：避免了固定组件的重复渲染。
设备屏幕上的像素（逻辑像素），我们可以当做是正常的像素（css中设置的像素），你可以正常使用它。如果你画一个100px的东西，他也就是一个100px的东西。但是，在出现了一些高分辨率屏幕的手机之后，一个属性devicePixelRatio就一起出现了。它允许我们去查询设备像素比。在这里我们需要抛出一个名词逻辑像素，也就是在css设置的100px时，在iphone6/7/8(devicePixelRatio为3)上，实际渲染的是300px的物理像素。比例为3：1
但是这对于我们开发者的影响是什么呢？早些时候，我们注意到当我们向这种高分辨率的屏幕添加img的时候，我们的图形受到devicePixelRatio的影响变得非常模糊。
如何解决这个问题呢？如果我把img的宽和高分别与devicePixelRatio相乘，得到的大小画进屏幕中，在对齐进行缩放devicePixelRatio的大小。Img就会以一种高清的方式呈现。
但是此方法有个问题就是既然同比将画布和内容进行了放大，然后在进行缩放，那么绘制出来的大小就会相应的增大。建议根据需求来判断是否需要进行高清 *** 作。
canvas动画的本质是不断地擦除和重绘，再结合一些时间控制的方法达到动画的目的
显示器刷新频率是60Hz，最平滑动画的最佳循环间隔是1000ms/60，约等于166ms
而 requestAnimationFrame 就是根据显示器刷新频率来的，这是浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，节省系统资源，提高系统性能，如果页面不是激活状态下的话， requestAnimationFrame() 会被暂停调用以提升性能和电池寿命。
执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，返回一个 requestID，该回调会在浏览器下一次重绘之前执行
取消一个先前通过调用window cancelAnimationFrame()方法添加到计划中的动画帧请求，接受一个 requestID
浏览器兼容
canvas每条线都有一条无限细的中线，线由中线两个伸展。
解决问题的根源起点应该在05的地方，这也是为什么x,y需要+05。当x,y做过计算不一定是整数的时候可能+05又出现模糊的情况。所以做一个取整可以保证不会出现模糊的情况
由于我们具备「把中的某一部分绘制到 Canvas 上」的能力。
在平常的html中，我们会把多个对象放在一张里面，以减少请求数量。这通常被称为「精灵图」。然而，这实际上存在着一些潜在的性能问题。 使用 drawImage 绘制同样大小的区域，数据源是一张和绘制区域尺寸相仿的的情形 ，和比起 数据源是一张较大（我们只是把数据扣下来了而已）的情形 ，前者的开销要小一些。可以认为，两者相差的开销正是「裁剪」这一个 *** 作的开销。
虽然看上去开销相差并不多，但是 drawImage 是最常用的 API 之一，我认为还是有必要进行优化的。优化的思路是，将「裁剪」这一步骤事先做好，保存起来，每一帧中仅绘制不裁剪。
我们可以先把待绘制的区域裁剪好，保存起来，这样每次绘制时就能轻松很多
drawImage 方法的第一个参数不仅可以接收 Image 对象，也可以接收另一个 Canvas 对象。而且，使用 Canvas 对象绘制的开销与使用 Image 对象的开销几乎完全一致。我们只需要实现将对象绘制在一个未插入页面的 Canvas 中，然后每一帧使用这个 Canvas 来绘制。
Tableau 7不支持绘制 Canvas。Canvas 是 HTML5 中的一个重要特性，用于动态渲染图像，而 Tableau 是一款专业的数据分析和可视化工具，虽然功能强大，但是并不支持 Canvas 绘制。
如果您需要使用 Canvas 绘制，请使用其他专业的前端绘图工具，如 D3js、Highcharts 等。这些工具提供了强大的绘制能力和丰富的图表类型，可以满足不同场景的需求，并且可以很容易地与 Tableau 集成，实现更好的数据可视化效果。
另外，如果您需要在 Tableau 中实现类似于 Canvas 的效果，可以考虑使用自定义形状文件和参数化技术来实现。通过创建自定义形状文件和定义相关参数，您可以轻松地绘制出各种符合需求的自定义形状，并在 Tableau 中使用这些形状文件来展示不同类型的数据。
我这里认为大家都稍微了解甚至熟悉canvas的一些API，就不具体说，每一个参数代表什么意思了。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>加载平移放大缩小示例</title>
<style>
html,body{
margin:0px;
padding:0px;
}
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
<script type="text/javascript" src="mainjs"></script>
</body>
</html>
var canvas,context;
function int(){
canvas=documentgetElementById('canvas');
context=canvasgetContext('2d');
}
加载
创建一个对象之后，不能马上绘制到canvas上面，因为还没有加载完成。所以我们需要监听对象加载完事件，然后再去绘制。
var img,//对象
imgIsLoaded//是否加载完成;
function loadImg(){
img=new Image();
imgonload=function(){
imgIsLoaded=true;
//draw image
}
imgsrc="mapjpg";
}
绘制
绘制图像一个函数就可以搞定，但是需要记录这个图像的左上角坐标以及缩放比例。
var imgX,imgY,imgScale;
function drawImage(){
contextclearRect(0,0,canvaswidth,canvasheight);
contextdrawImage(img,0,0,imgwidth,imgheight,imgX,imgY,imgwidthimgScale,imgheightimgScale);
}
平移
html5事件最小细度在DOM上，所以我们无法对canvas上的图像做监听，只能对canvas监听。
首先监听鼠标mousedown事件，等事件发生之后，再监听鼠标mousemove事件和mouseup事件
mousemove事件发生之后，获得鼠标移动的位移，相应的的位置改变多少
mouseup事件发生之后，取消对mousemove以及mouseup事件监听
canvasonmousedown=function(event){
var pos=windowToCanvas(canvas,eventclientX,eventclientY);
canvasonmousemove=function(event){
canvasstylecursor="move";
var pos1=windowToCanvas(canvas,eventclientX,eventclientY);
var x=pos1x-posx;
var y=pos1y-posy;
pos=pos1;
imgX+=x;
imgY+=y;
drawImage();
}
canvasonmouseup=function(){
canvasonmousemove=null;
canvasonmouseup=null;
canvasstylecursor="default";
}
}
function windowToCanvas(canvas,x,y){
var bbox = canvasgetBoundingClientRect();
return {
x:x - bboxleft - (bboxwidth - canvaswidth) / 2,
y:y - bboxtop - (bboxheight - canvasheight) / 2
};
}
缩放
其实缩放很简单，稍微复杂的是，如何让鼠标成为放大或者缩小的中心。如果数学几何不好，计算公式就可能看不明白了。
canvasonmousewheel=canvasonwheel=function(event){//chrome firefox浏览器兼容
var pos=windowToCanvas(canvas,eventclientX,eventclientY);
eventwheelDelta=eventwheelDeltaeventwheelDelta:(eventdeltaY(-40));
if(eventwheelDelta>0){
imgScale=2;
imgX=imgX2-posx;
imgY=imgY2-posy;
}else{
imgScale/=2;
imgX=imgX05+posx05;
imgY=imgY05+posy05;
}
drawImage();
}
这个时候，基本功能就实现了，加载一张和加载多张都差不多，维护每一张的位置和大小，下面来整理一下代码吧。
var canvas,context;
var img,//对象
imgIsLoaded,//是否加载完成;
imgX=0,
imgY=0,
imgScale=1;
(function int(){
canvas=documentgetElementById('canvas');
context=canvasgetContext('2d');
loadImg();
})();
function loadImg(){
img=new Image();
imgonload=function(){
imgIsLoaded=true;
drawImage();
}
imgsrc="mapjpg";
}
function drawImage(){
contextclearRect(0,0,canvaswidth,canvasheight);
contextdrawImage(img,0,0,imgwidth,imgheight,imgX,imgY,imgwidthimgScale,imgheightimgScale);
}
canvasonmousedown=function(event){
var pos=windowToCanvas(canvas,eventclientX,eventclientY);
canvasonmousemove=function(event){
canvasstylecursor="move";
var pos1=windowToCanvas(canvas,eventclientX,eventclientY);
var x=pos1x-posx;
var y=pos1y-posy;
pos=pos1;
imgX+=x;
imgY+=y;
drawImage();
}
canvasonmouseup=function(){
canvasonmousemove=null;
canvasonmouseup=null;
canvasstylecursor="default";
}
}
canvasonmousewheel=canvasonwheel=function(event){
var pos=windowToCanvas(canvas,eventclientX,eventclientY);
eventwheelDelta=eventwheelDeltaeventwheelDelta:(eventdeltaY(-40));
if(eventwheelDelta>0){
imgScale=2;
imgX=imgX2-posx;
imgY=imgY2-posy;
}else{
imgScale/=2;
imgX=imgX05+posx05;
imgY=imgY05+posy05;
}
drawImage();
}
function windowToCanvas(canvas,x,y){
var bbox = canvasgetBoundingClientRect();
return {
x:x - bboxleft - (bboxwidth - canvaswidth) / 2,
y:y - bboxtop - (bboxheight - canvasheight) / 2
};
整理了一些有关canvas的属性（ ’ - ’ )
canvas画布
用于绘制图像，本身不具备绘制能力，需要通过脚本来完成绘画，通常这个脚本就是javascript
canvas的默认宽高为300150，不能通过css或行内样式修改它的宽高，它有自己的宽高属性
canvas是一个html元素，通过js来执行绘制
getContext()是用来获取canvas上下文渲染环境和绘画功能的方法,目前只有一个参数：'2d'，代表返回一个2d的绘制环境，将来有可能3d，但是目前不支持
它可以做什么？
html5小游戏
绘制，图标，图表，曲线图等等，例如地图上的热力图等等
以及各种酷炫的动画效果都可以通过canvas来完成(可以了解一下WEBGL<>
以上就是关于HTML5 Canvas元素绘制地图，如何实现显示鼠标所移动地方名称全部的内容，包括:HTML5 Canvas元素绘制地图，如何实现显示鼠标所移动地方名称、canvas简介以及常用性能优化、如何用tablea7绘制canvas等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）