Html5 Canvas开发之鼠标绘图和方块移动

最新推荐文章于 2024-07-27 09:49:03 发布

子循

最新推荐文章于 2024-07-27 09:49:03 发布

阅读量8.3k

点赞数

本文链接：https://blog.csdn.net/Tsangyang/article/details/8192837

版权

Html5 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Canvas

4 篇文章 0 订阅

订阅专栏

1.鼠标绘图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
span{ color:white;}
</style>
<script>

window.onload = function(){
	var oC = document.getElementById('c1');
	
	var oGC = oC.getContext('2d');  
	
	oC.onmousedown = function(ev){
		var ev = ev || window.event;
		oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
		document.onmousemove = function(ev){
			var ev = ev || window.event;
			oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
			oGC.stroke();
		};
		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;
		};
	};
	
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400">
	<span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
</body>
</html>

2.方块移动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
span{ color:white;}
</style>
<script>

window.onload = function(){
	var oC = document.getElementById('c1');
	
	var oGC = oC.getContext('2d');  
	
	var num = 0;
	
	oGC.fillRect(0,0,100,100);
	
	setInterval(function(){
		
		num++;
		
		oGC.clearRect(0,0,oC.width,oC.height);
		
		oGC.fillRect(num,num,100,100);
		
	},30);
	
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400">
	<span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
</body>
</html>

3.Canvas开发注意事项 canvas画布宽高定义

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white; width:600px; height:300px;}
span{ color:white;}
</style>
<script>

window.onload = function(){
	var oC = document.getElementById('c1');
	
	var oGC = oC.getContext('2d');  
	
	var num = 0;
	
	oGC.fillRect(0,0,100,100);
	
	
};

</script>
</head>

<body>
<canvas id="c1">
	<span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
</body>
</html>

此定义方式为按（默认大小）比例矢量放大缩小，如果要定义宽高应如下定义

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white; }
span{ color:white;}
</style>
<script>

window.onload = function(){
	var oC = document.getElementById('c1');
	
	var oGC = oC.getContext('2d');  
	
	var num = 0;
	
	oGC.fillRect(0,0,100,100);
	
	
};

</script>
</head>

<body>
<canvas id="c1" width:600px; height:300px;>
	<span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
</body>
</html>

子循

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Html5 Canvas开发之鼠标绘图和方块移动

1.鼠标绘图无标题文档body{ background:black;}#c1{ background:white;}span{ color:white;}window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d');
复制链接

扫一扫

专栏目录