gitee

分支 (2)

管理

管理

gitee

master

qcanvas
/
template10.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>

<script src="js/jquery.js"></script>
	<link href="style/default.min.css" rel="stylesheet">
	<link rel="stylesheet" href="style/style.css">
	<script src="js/highlight.min.js"></script>
		<script>hljs.initHighlightingOnLoad();</script>
		<script src="js/initTemp.js"></script>
	 <style>
	 	#tip{
			float: right;
			font-size: 12px;
			margin-right:20px;
			overflow-y:scroll;
			height: 200px;
		}
	 </style>
</head>
<body>
	<div class="qcanvas_lay">

		<canvas id="qcanvas"></canvas>
		<span id="tip">

		</span>
	</div>
	<div class="code_lay">
		<pre><code class="js">var qcanvas = new Qcanvas(["qcanvas",300,200]);
	var tip = document.getElementById('tip');

	var rect1 = qcanvas.qrect.rect({
		start:[20,20],
		borderColor:'red',
		fillColor:'green',
		drag:false,
		mouseout:function(){
			console.log('绿色块mouseout事件');
		tip.innerHTML ='绿色块mouseout事件'+parseInt(Math.random()*10)+'<br>'+tip.innerHTML;
		},
		mouseenter:function(){
			console.log('绿色块mouseenter事件');
		tip.innerHTML ='绿色块mouseenter事件'+parseInt(Math.random()*10)+'<br>'+tip.innerHTML;


		}
	})


var rect = qcanvas.qrect.rect({
	start:[0,10],
	borderColor:'red',
	fillColor:'blue',
	drag:false,
	mouseup:function(){
		console.log('蓝色块mouseup事件');
		tip.innerHTML ='蓝色块mouseup事件'+parseInt(Math.random()*10)+'<br>'+tip.innerHTML;
	},
	mousedown:function(){
		console.log('蓝色块mousedown事件');
		tip.innerHTML ='蓝色块mousedown事件'+parseInt(Math.random()*10)+'<br>'+tip.innerHTML;
	},
	mousemove:function(){
		console.log('蓝色块mousemove事件');
		tip.innerHTML ='蓝色块mousemove事件'+parseInt(Math.random()*10)+'<br>'+tip.innerHTML;
	},
	mouseout:function(){
		console.log('蓝色块mouseout事件');
		tip.innerHTML ='蓝色块mouseout事件'+parseInt(Math.random()*10)+'<br>'+tip.innerHTML;
	}
})
		</code>
	</pre>
</div>


</body>
<script src='Qcanvas.js'></script>
<script>
	var qcanvas = new Qcanvas(["qcanvas",300,200]);
	var tip = document.getElementById('tip');

	var rect1 = qcanvas.qrect.rect({
		start:[20,20],
		borderColor:'red',
		fillColor:'green',
		drag:false,
		mouseout:function(){
			console.log('绿色块mouseout事件');
		tip.innerHTML ='<font color="green">绿色块mouseout事件</font>'+parseInt(Math.random()*10)+'<br>'+tip.innerHTML;
		},
		mouseenter:function(){
			console.log('绿色块mouseenter事件');
		tip.innerHTML ='<font color="green">绿色块mouseenter事件</font>'+parseInt(Math.random()*10)+'<br>'+tip.innerHTML;


		}
	})


var rect = qcanvas.qrect.rect({
	start:[0,10],
	borderColor:'red',
	fillColor:'blue',
	drag:false,
	mouseup:function(){
		console.log('蓝色块mouseup事件');
		tip.innerHTML ='<font color="blue">蓝色块mouseup事件</font>'+parseInt(Math.random()*10)+'<br>'+tip.innerHTML;
	},
	mousedown:function(){
		console.log('蓝色块mousedown事件');
		tip.innerHTML ='<font color="blue">蓝色块mousedown事件</font>'+parseInt(Math.random()*10)+'<br>'+tip.innerHTML;
	},
	mousemove:function(){
		console.log('蓝色块mousemove事件');
		tip.innerHTML ='<font color="blue">蓝色块mousemove事件</font>'+parseInt(Math.random()*10)+'<br>'+tip.innerHTML;
	},
	mouseout:function(){
		console.log('蓝色块mouseout事件');
		tip.innerHTML ='<font color="blue">蓝色块mouseout事件</font>'+parseInt(Math.random()*10)+'<br>'+tip.innerHTML;
	}
})


</script>

</html>