basic drawing canvas, usage

canvas
	用来'替代'flash等其他用于做动画或游戏的插件的一个标签

	1、可以理解为div,提供一个区域用来绘制图形
	2、习惯在标签上对其大小进行设置,而不是css或js,并且标签中添加文本<canvas width='xxpx' height='xxpx'>您的浏览器不支持canvas标签,请变更支持canvas的浏览器</canvas>
		原因:支持canvas标签会显示正常的绘制图形,不支持canvas标签的会输出文本
	3、内部所有内容或图形需要通过js来完成
	4、生成js画笔; var bi=canvas对象.getContext('2d/3d');

	
	特征
		1、上屏即像素化
			即画的内容无法改变,脱离文本流
		2、fps
			frame per second即每秒加载多少帧/画	

	画方块
		bi.fillRect(方块左上角顶点x坐标,方块左上角顶点y坐标,方块x方向边长,方块y方向边长)

		颜色:
		bi.fillStyle='颜色';需在方块画上前添加,因为上屏即像素化的特点

		擦除:
		bi.clearRect(方块左上角顶点x坐标,方块左上角顶点y坐标,方块x方向边长,方块y方向边长);


	画方框
		bi.strokeRect(方块左上角顶点x坐标,方块左上角顶点y坐标,方块x方向边长,方块y方向边长);
	颜色:
	 	bi.strokeStyle='颜色';

Code Example:

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		.canvas{
			border:solid 2px black;
		}
	
	
	</style>
</head>
<body>

	<canvas width="300px" height="200px" class='canvas'>您的浏览器不支持canvas标签,请变更支持canvas的浏览器</canvas>
	<script>
	
		var canvas=document.querySelector('.canvas');
		var bi=canvas.getContext('2d');
		
		var num=20;
		var fx=1;
		
		var timer=setInterval(function(){
	
			bi.fillStyle='pink';
			if(num>=canvas.width-50)
			{
				fx=0;
			}else if(num<=0){
				fx=1;
			}
			if(fx==1){
				console.log(fx,':'+num);
				bi.clearRect(num,10,50,50);
				bi.fillRect(++num,10,50,50);
			}else{
				bi.clearRect(0,0,300,200);
				bi.fillRect(--num,10,50,50);
			}


		},25) //fps=40;
	</script>
	
</body>

</html>
Published 281 original articles · won praise 3 · Views 4833

Guess you like

Origin blog.csdn.net/weixin_43294560/article/details/103980968