HTML画布是一种内置的HTML5元素,可以通过它来绘制图形,并进行交互操作。
下面是一个简单的代码示例,展示如何在HTML画布上制作一个小游戏:
<canvas id="myCanvas" width="300" height="200"></canvas> <script> // 获取画布和上下文对象 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 定义小球参数 var x = canvas.width/2; var y = canvas.height-30; var dx = 2; var dy = -2; var ballRadius = 10; // 绘制小球函数 function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI*2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } // 循环绘制函数 function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBall(); // 小球碰到边界反弹 if(x + dx >canvas.width-ballRadius || x + dx< ballRadius) { dx = -dx; } if(y + dy >canvas.height-ballRadius || y + dy< ballRadius) { dy = -dy; } x += dx; // 移动小球 y += dy; requestAnimationFrame(draw); // 每帧绘制 } draw(); // 开始绘制 </script>
以上代码中,首先在HTML页面中定义了一个canvas元素,并指定其宽度和高度。接着,通过JavaScript代码获取到该画布元素以及其上下文对象。在绘制函数draw中,首先清除画布,然后绘制小球,并根据小球的运动轨迹进行位置的更新,最后使用requestAnimationFrame方法来实现动画效果的连续绘制。
通过以上代码示例,可以发现使用HTML画布很容易就可以实现一个简单的小游戏,同时也具有较高的可交互性,适合用于一些小型互动应用的制作。