html5的canvas绘制了个房间结构图,鼠标移动到哪个房间,哪个房间填充颜色

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html5的canvas绘制了个房间结构图,鼠标移动到哪个房间,哪个房间填充颜色相关的知识,希望对你有一定的参考价值。

图形画完了,如何判断鼠标移动到了哪个区域,并且处理填充颜色呢?

因为没有说明有没使用 jQuery 等语言库,所以使用原生JS来演示。

代码如下,直接复制那段JS去用就可以了。

over是进入区域的事件,out是离开区域的事件。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<canvas id="myCanvas2" width="300" height="200" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var obj=document.querySelectorAll('canvas');
for(var i=0;i<obj.length;i++)
obj[i].onmouseover=function()
this.style.backgroundColor='#ccc';

obj[i].onmouseout=function()
this.style.backgroundColor='#fff';


</script>
</body>
</html>

参考技术A 鼠标滑过的时候能拿到鼠标x,y坐标 判断坐标在那个房间区域内就可以

怎样用h5canvas鼠标绘制图形

参考技术A 首先,准备个容器,也就是画板了。
<canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas>

但是,由于IE部分版本还是不支持HTML5,那我们可以借用exCanvas兼容IE..
<div id="canvasDiv"></div>

初始化js代码
如果你不管IE使用第一种方法
context = document.getElementById('canvasInAPerfectWorld').getContext("2d");

为了兼容IE,不得不使用下面这个方法,创建一个canvas,然后使用excanvas初始化。当然,为了IE兼容,你需要针对IE加上exCanvas.js
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");

开始一个简单的画板
在开始之前,说说怎么做先。它包含了四个鼠标事件和两个方法。addClick是为了记录鼠标的移动点,redraw是把记录的数据画出来。 (提一下,由于原作者使用了jquery,所以你也要把jquery引用进来。)
鼠标按下事件(Mouse Down Event)
当鼠标按下时,把paint设为true,表示正在画,鼠标没松开。把鼠标点记录下来。
$('#canvas').mousedown(function(e)
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;

paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
);

鼠标移动事件(Mouse Move Event)
当按下鼠标的时候,鼠标移动就把点记录下来并画出来。
$('#canvas').mousemove(function(e)
if(paint)//是不是按下了鼠标
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();

);

鼠标松开事件(Mouse Up Event)
$('#canvas').mouseup(function(e)
paint = false;
);

鼠标移开事件(Mouse Leave Event)
$('#canvas').mouseleave(function(e)
paint = false;
);

addClick方法
记录鼠标坐标点
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;

function addClick(x, y, dragging)

clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);


redraw方法
目前这个redraw方法是每次都清空画板,然后重新把所有的点都画过,虽然效率不高,但是这样看起来还是挺简单的。
function redraw()
canvas.width = canvas.width; // Clears the canvas

context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;

for(var i=0; i < clickX.length; i++)

context.beginPath();
if(clickDrag[i] && i)//当是拖动而且i!=0时,从上一个点开始画线。
context.moveTo(clickX[i-1], clickY[i-1]);
else
context.moveTo(clickX[i]-1, clickY[i]);

context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();


最后
这上面的只是个简单的例子啦。。。原作者还在上面代码的基础上加了颜色,大小,橡皮擦等功能呢~~想看的FQ去看作者博客吧。。这年头不会FQ还真不好意思见人。

以上是关于html5的canvas绘制了个房间结构图,鼠标移动到哪个房间,哪个房间填充颜色的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 Canvas元素绘制地图,如何实现显示鼠标所移动地方名称?

在 HTML5 画布中绘制鼠标移动的半透明线

HTML5 Canvas元素绘制地图,已绘制出地图,并且地图可放大缩小,怎样实现鼠标移动到一幢楼时显示楼的名称

在 HTML5 Canvas 中绘制图像,同时保留图像

怎样用h5canvas鼠标绘制图形

Day08 - HTML5 Canvas 实现彩虹画笔绘画板指南