Sandy Blog

关于如何运用canvas进行局部事件绑定

发表于 |

关于如何运用canvas进行局部事件绑定

嘿嘿，脑子有坑的我突然想起用canvas画个导航栏，然后进行局部位置进行事件点击，然而过程略带难度，因此记录下啦。好哒，废话不多说直接上图！

第一步，我要画圆和矩形嘛，肯定有个画布啦：

1
2
3
<canvas id='draw' width="1000px" height='900px'   ></canvas>
		<script src="js/hanshu.js"></script>
		<script src="js/huayuan.js"></script>
PS：值得注意的是：我是把里面的函数单独封装在一个文件里了，接着在另一个文件调用需要的函数，因此在引用的时候需要注意下顺序，先引用封装好的函数，再引用另一个文件。（这个方法是某位大佬告诉宝宝，这样比较有“装逼特效”，哈哈哈！）
第二步，封装函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function drawArc(parms){   //因为需要画四个圆图片，所以需要封装一下
	var x = parms.x || 0,
		y = parms.y || 0,
		width = parms.width || 0,
		height = parms.height || 0,
		r = parms.r || 0,
		color = parms.color || '#f27c24',
		imgSrc = parms.src || 'img/1.png';
	var img = new Image();
	img.src = imgSrc;
	img.onload = function(){
		con.drawImage(img, x, y,width ,height);
		var pattern=con.createPattern(img,"no-repeat");
		con.fillStyle=pattern;
		con.fill();
		con.closePath();
		con.restore();
	}
	
	
}
function drawLine(line){    //这是画矩形
     var x = line.x || 0,
     	 y = line.y || 0,
    	 z = line.z || 0,
     	 q = line.q || 0,
     color = line.color || ('#f27c24'),
     linewidth = line.linewidth || 5
		con.moveTo(x,y);
		con.lineTo(z,q);
		con.strokeStyle = color;
		con.stroke();
		con.linewidth = linewidth;
}
PS:因为脑子有坑的想法，所以画了个矩形

第三步：调用函数

这里，我将每组数据都写好放在数组里，接着在用for循环一下，直接调用，这样就不用重复没必要重复的代码了，嘻嘻
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var canvas = document.getElementById("draw"),con = canvas.getContext("2d");
var arrsrc = [
    {x: 200,y: 120,width: 150,height: 150},
    {x: 800,y: 120,width: 180,height: 150,src:'img/2.png'},
    {x: 200,y: 520,width: 180,height: 150,src:'img/3.png'},
    {x: 780,y: 520,width: 180,height: 180,src:'img/4.png'}
]
var linesrc = [
	{x: 320,y: 600,z: 820,q: 600},
	{x: 320,y: 200,z: 820,q: 200},
	{x: 280,y: 200,z: 280,q: 600},
	{x: 880,y: 200,z: 880,q: 600}
]
for (var i = 0; i < 4; i++) {
	drawArc(arrsrc[i]);
	drawLine(linesrc[i]);
}
画面如图：
  • 背景是运用CSS3透明的效果做的，详情自己百度吧，嘻嘻！
    酥酥的首页

第四步，重点来啦！绑定事件：

* 因为有四个圆，并且位置不一样，每个圆点击就会跳转不同的新页面，从而实现相当于导航栏的功能。然而canvas只能绑定一个事件，那么问题来了，难道我点击任何一个地方都只能跳转到一个页面吗？当然不能这样，这样的话有什么意义哦。所以，在这里我给画布的点击事件进行了个位置判断。
  • 对于event不太熟悉的童鞋，个人建议去看下W3C，然后做个小demo就明白了，在这里我就不多解释了，总之就是能获取位置的。在这里我了for循环，对四个位置都循环了下，这样再利用if(){}else if(){}进行语句判断。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    canvas.onclick=function(e){
    	e = e || event;
    	 var x = e.offsetX; 
      		y = e.offsetY;
      for(var i = 0; i < 4; i++ ){
      	if(x >= arrsrc[i].x && x<= arrsrc[i].x+arrsrc[i].width && y >= arrsrc[i].y && y<= arrsrc[i].y+arrsrc[i].width){
      	//在判断if这里,刚开始是想破脑袋，怎么获取相应的位置，后来有位大佬提醒说，先循环4个圆，接着再利用圆的半径进行构建一个方形，在方形的区域内，能进行位置获取~嘿嘿
      		if (i == 0) {
      			window.location.href = "susu1.html"; 
      		} else if (i == 1) {
               window.location.href="susu3.html";
      		} else if(i == 2){
               window.location.href='susu2.html';
      		}else if(i == 3){
              window.location.href='susu4.html';
      		}else{
      			window.location.href='susu.html';
      		}
      	}
      }
    }
PS：在这里要顺便提醒下各位，现在谷歌浏览器开始停用window.open()这个方法了，所以我为了避免出现打不开页面的尴尬现象，改用了window.localtion.href 这个方法。
其实并不建议大家用canvas做这样的导航栏，毕竟降低开发效率，而且可能给后台带来不必要的麻烦，但这是我自己给爱宠做的一个小网站，同时也给自己练练手，所以我开心我乐意，略略略~~~
小女子不才，还希望多多支持与鼓励，一分鼓励一毛关爱！