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>