1.了解canvas元素
学习了canvas元素后,感觉能不用插件在页面上画图很好,就深入了解了一下.我愿意把我学习到的分享出来,一来给初学者一点帮助,二来可以让大家指出我的不足之处.在下还只是在学习阶段.希望得到高人的指点哈.
本系列致力于简单的动画特效,或者游戏特效.我会将我的思考一步一步讲述出来.可能会很基础.但是一定能带你走进这个新奇的元素. 希望与君共学习. Let us begin!
今天是第一天,我开始学习了canvas中的API.知道这是一个画布元素,要想在里面画东西,就要得到它的上下文(有的也叫绘图环境).利用这个上下文,用JS调用API.从而在画布上显示图像.例如这样:
计算
安全
数据库
网络和加速
企业服务
<!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>初识 canvas</title>
</head>
<body>
<canvas id="myCanvas" width="800px" height="600px" >
your browser is not support canvas.
</canvas>
<!---------------------------------------------------------------------------->
<script type="text/javascript">
var canvas = document.getElementById("myCanvas"); //得到canvas
var canvas2D = canvas.getContext("2d"); //得到上下文
</script>
</body>
</html>可以看到页面上有一个小方块,这就是canvas元素,可以在里面进行绘图了.canvas默认的大小是300*150.可以看出canvas元素就和其他的元素是一样的,是页面描述的一部分而已.
那么先来画一个图形吧.恩! 看看下面的代码.
<script type="text/javascript">
var canvas = document.getElementById("myCanvas"); //得到canvas
var canvas2D = canvas.getContext("2d"); //得到上下文
canvas2D.fillStyle = "rgba(255,0,0,1)";
canvas2D.fillRect(10,10,100,200);
canvas2D.beginPath();
canvas2D.arc(400,400,200,0,Math.PI*2,false);
canvas2D.closePath();
canvas2D.fill();
canvas2D.beginPath(); //注意清除路径
canvas2D.moveTo(700,0);
canvas2D.lineTo(700,500);
canvas2D.strokeStyle = "#123465";
canvas2D.stroke();
</script>这些API都可以在W3C中找到,由于这不是本文的重点,就不累述了.只是要注意的几点(也是在下在学习的过程中遇到的问题).
1.要fill(),stroke()是把路径填充显示出来的.用的路径的话,一定要记得清除路径,就是beginPath().
2.刷新canvas有2中方法,一个是clearRect(),这个不仅可以清除canvas中所以的图像,还可以清除一部分,从而创造出复杂的图像,但是它不会清除画笔.还有一个是改变canvas的大小,默认改变canvas的大小后,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>初识 canvas</title>
<!------------------------------------------------------------------------------>
<style type="text/css">
body{margin:0px;}
#myCanvas{
border:1px #0000FF solid;}
</style>
<!------------------------------------------------------------------------------>
</head>
<body>
<canvas id="myCanvas">
your browser is not support canvas.
</canvas>
<!---------------------------------------------------------------------------->
<script type="text/javascript">
function ballMove(canvasID)
{
var canvas = document.getElementById(canvasID); //得到canvas
canvas.width = 800;
canvas.height = 600;
var canvas2D = canvas.getContext("2d");
var refreshRate = ~~(1000/24); //刷新速率
var radius = 100; //园的半径
var ballColor = "rgba(255,0,0,0.5)" //圆的颜色
var x = 100; //圆心的起始位置
var y = 100;
var x_off = 5; //x方向移动速度
var y_off = 10; //y方向移动速度
var flagx = 1; //标志变量
var flagy = 1;
var carshRight = canvas.width - radius; //碰撞的实际宽度
var carshButtom = canvas.height - radius; //碰撞的实际高度
var carshLeft = 0 + radius;
var carshTop = 0 +radius;
setInterval(
function()
{
//判断
if(x < carshLeft)
{
x = carshLeft; //补帧操作
flagx = 1;
}
if(x > carshRight)
{
x = carshRight;
flagx = -1;
}
if(y > carshButtom)
{
y = carshButtom;
flagy = -1;
}
if(y < carshTop)
{
y = carshTop;
flagy = 1;
}
//画图
canvas2D.beginPath(); //下面两句是清除画布
canvas2D.clearRect(0,0,canvas.width,canvas.height);
canvas2D.arc(x,y,radius,0,Math.PI*2,false);
canvas2D.fillStyle = ballColor;
canvas2D.fill();
//下一帧
x = x + flagx * x_off;
y = y + flagy * y_off;
}
,refreshRate);
}
ballMove("myCanvas");
</script>
</body>
</html>动画: 由帧构成, 所以叫补帧动画.
每一帧就是一附图片,人的眼睛有视觉停留的功能,大约每秒能看24附图片.然后这些图片经过大脑的加工,就让人感觉到物体在移动了.所以,动画就是图片,在这样就是canvas中的内容,只要canvas中的内容改变,就能形成动画了.
这种写法不是很科学,但是,能够实现我想要的效果,记得一位大师说过,写代码不一定要多么的复杂,只要是你想要的结果,那什么代码都行.在这个基础上,可以实现碰撞后改变球的颜色,大小等.
也可以碰撞后减小速度.这不就是一个台球吗?虽然不是很完善,但有了这种思想,就一定OK的了.附上小球改变大小的实例. 还可以改变更多东西,你能想到的,就去实现吧.
初学者大多都是这样写的吧,我也不例外,但是在以后的代码中,这种就会很少出现了.应为JS是面向对象的,那就用面向对象的来写吧. 明天继续 今天就到这里吧
下面是小球运动改变大小的代码: 希望能想到更多的东西.
<!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>初识 canvas</title>
<!------------------------------------------------------------------------------>
<style type="text/css">
body{margin:0px;}
#myCanvas{
border:1px #0000FF solid;}
</style>
<!------------------------------------------------------------------------------>
</head>
<body>
<canvas id="myCanvas">
your browser is not support canvas.
</canvas>
<!---------------------------------------------------------------------------->
<script type="text/javascript">
function ballMove(canvasID)
{
var canvas = document.getElementById(canvasID); //得到canvas
canvas.width = 800;
canvas.height = 600;
var canvas2D = canvas.getContext("2d");
var refreshRate = ~~(1000/24); //刷新速率
var radius = 100; //园的半径
var ballColor = "rgba(255,0,0,0.5)" //圆的颜色
var x = 100; //圆心的起始位置
var y = 100;
var x_off = 5; //x方向移动速度
var y_off = 10; //y方向移动速度
var flagx = 1; //标志变量
var flagy = 1;
var carshRight = canvas.width - radius; //碰撞的实际宽度
var carshButtom = canvas.height - radius; //碰撞的实际高度
var carshLeft = 0 + radius;
var carshTop = 0 +radius;
setInterval(
function()
{
//判断
if(x < carshLeft)
{
x = carshLeft; //补帧操作
flagx = 1;
}
if(x > carshRight)
{
x = carshRight;
flagx = -1;
}
if(y > carshButtom)
{
y = carshButtom;
flagy = -1;
}
if(y < carshTop)
{
y = carshTop;
flagy = 1;
}
//画图
canvas2D.beginPath(); //下面两句是清除画布
canvas2D.clearRect(0,0,canvas.width,canvas.height);
canvas2D.arc(x,y,radius,0,Math.PI*2,false);
canvas2D.fillStyle = ballColor;
canvas2D.fill();
//下一帧
x = x + flagx * x_off;
y = y + flagy * y_off;
}
,refreshRate);
}
ballMove("myCanvas");
</script>
</body>
</html>亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
