HTML5 canvas 动画基础自学分享 1

发布时间：2020-07-06 05:26:11 作者：QQ844033231
来源：网络阅读：883

1.了解canvas元素

学习了canvas元素后,感觉能不用插件在页面上画图很好,就深入了解了一下.我愿意把我学习到的分享出来,一来给初学者一点帮助,二来可以让大家指出我的不足之处.在下还只是在学习阶段.希望得到高人的指点哈.

本系列致力于简单的动画特效,或者游戏特效.我会将我的思考一步一步讲述出来.可能会很基础.但是一定能带你走进这个新奇的元素. 希望与君共学习. Let us begin! HTML5 canvas 动画基础自学分享 1

今天是第一天,我开始学习了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>

HTML5 canvas 动画基础自学分享 1

相关阅读