自学前端一段时间,html,css,css3学的还是蛮有趣的,但凡有小例子我都要举一反三一下,特别有趣!!!但是呢,好景不长,js这该死的大佬挡在了我的取经之路上,着实比较抽象,索性就放弃了一段时间,师傅想去天美遨游一段时间,就这样,该死的入坑游戏“王者农药”搁置了一段时间,八月份一直在排位。。。直至今天,这次心血来潮又重新拾起,学了Canvas感觉又是重新振作信心,好了,前提有点长,现在我们进入正文。
「 はい」,今日份!
首先,日常百基百科——Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap)。
Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作。
应用场景:统计图表,在线画板,小游戏...
{php/java/c#..}
使用canvas{画布}
#注意:canvas需要指定宽高,只能用标签属性
或者js指定.
!!!!一定不能用css指定
a:<canvas id="c1" width="500" height="400">
</canvas>
b:js
c1.width = 500;
c1.height = 400;
#有了画布?依据画布创建画笔(ctx)
var ctx = c1.getContext('2d');
之所以回顾这些呢,我也是刚学,一则想作为笔记;二则可以记忆一下,希望大家不要嫌烦,笔芯!
Canvas的常用属性:ctx.fillStyle = '#f40'; //填充颜色 ctx.strokeStyle = '#eee'; //描边颜色 globalAlpha = '1'; //全局不透明度 lineWidth = 10; //描边的粗细 shadowOffsetX = 0; //阴影在X轴的偏移量 shadowOffsetY = 0; //阴影在Y轴的偏移量 |
Canvas的常用方法:ctx.fillRect(x,y,w,h); // 填充一个矩形 ctx.strokeRect(x,y,w,h); //描边一个矩形 ctx.clearRect(x,y,w,h); //清除一个矩形 |
Next...canvas的碰撞问题:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}
#myCanvas {
background: #f3f3f3;
}
</style>
</head>
<body>
<h2>rectangle来回晃动</h2>
<canvas id="myCanvas" width="500" height="400"></canvas>
<script>
var ctx = myCanvas.getContext('2d'); //得到一个画笔
//定义一个定时器来制作动画
var x = 0;
var xDirection = 1; //只能取值为1或-1,来改变在X运动的方向(经典的碰撞问题解决方案)
var timer1 = setInterval(function(){
//清除已有的图形
ctx.clearRect(0,0,500,400);
//重新绘制图形
ctx.fillStyle='#0f0';
ctx.fillRect(x,100,100,80);
x += 10*xDirection;
if (x>=400) {
xDirection = -1; //反方向运动
}else if (x<=0) {
xDirection = 1;
}
},100);
</script>
</body>
</html>
1.碰撞时 2.碰撞后
解决这个问题的关键是定义一个变量,xDirection = 1; //取值只能是1或者-1,通过这个变量来改变碰撞方向