利用canvas制作乱跑的小球

canvas制作乱跑的小球

说明：将下面的代码放到html的body就可以，键盘控制上(W)下(S)左(A)右(D)

<body>
<canvas id="canvas" style="border: 1px solid #000;display: block;margin:30px auto;"></canvas>
<script type="text/javascript">var myCanvas=document.getElementById('canvas');
myCanvas.height="500";//背景为500*500
myCanvas.width="500";
var ctx=myCanvas.getContext("2d");
//键盘事件
document.οnkeydοwn=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
var x=0,y=0;
// 上按W
if(e && e.keyCode==87){
ctx.clearRect(x-11,y-11,22,22);
y-=10;
ctx.translate(x,y);
ctx.beginPath();
ctx.arc(0,0,10,0,Math.PI*2);
ctx.fill();
ctx.closePath();
ctx.restore();
};
// 左按A
if(e && e.keyCode==65){
ctx.clearRect(x-11,y-11,22,22);
x-=10;
ctx.translate(x,y);
ctx.beginPath();
ctx.arc(0,0,10,0,Math.PI*2);
ctx.fill();
ctx.closePath();
ctx.restore();
} ;
// 下按S
if(e && e.keyCode==83){
ctx.clearRect(x-11,y-11,22,22);
y=10;
ctx.translate(x,y);
ctx.beginPath();
ctx.arc(0,0,10,0,Math.PI*2);
ctx.fill();
ctx.closePath();
ctx.restore();
}
// 右按D
if(e && e.keyCode==68){
ctx.clearRect(x-11,y-11,22,22);
x=10;
ctx.translate(x,y);
ctx.beginPath();
ctx.arc(0,0,10,0,Math.PI*2);
ctx.fill();
ctx.closePath();
ctx.restore();
}
};</script>
</body>

利用canvas制作乱跑的小球相关推荐

利用Canvas制作旋转的矩形
利用Canvas制作旋转的矩形 HTML5 Canvas API提供了强大的图形绘制功能,包括形状.颜色.线条样式等.在本文中,我将展示如何使用Canvas API创建一个旋转的矩形. 一.HTML结 ...
利用canvas制作加速球波浪效果
我在第一篇博客中提到运用canvas制作加速球效果,现在把整个代码分享给大家,希望对大家有帮助.(转载请标明出处) 先上效果图: 还存在一些问题: 1.想法是鼠标触碰到滑块才执行画波浪的效果,结果是直 ...
利用canvas制作进度条实践
开门见字之前写过一篇H5新标签progress进度条的使用文章,当时觉得研究的还行,但是发现,这个标签在不同浏览器中样式表现是不一致的,如下: chrome中:,一抹蓝色划过天际: 火狐中:,一片绿 ...
利用canvas制作时钟表
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
python用七巧板图片画个图_canvas 入门－利用 canvas 制作一个七巧板
当前浏览器不支持cnavas var tangram = [ { f:[{x: 0,y: 0},{x: 800, y: 0},{x: 400, y: 400}], color: "#FEF7 ...
利用canvas制作背景动画（3）
一. 炫酷星空 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" c ...
在html利用canvas蚂蚁,html5 利用canvas实现简单的人物走动
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...
Canvas入门－利用Canvas绘制好玩的电子时钟
在这之前你需要了解一下方法的使用: beginPath() closePath() moveTo() lineTo() fill() stroke() fillRect() clearRect() ...
让人脸动起来html源码,分享利用HTML5的Canvas制作人脸的实例代码
这里主要使用了 HTML5 的 Canvas 进行绘制.利用html5制作人脸的实例代码. 先看我们要绘制的人脸效果图: 这里主要使用了 HTML5 的 Canvas 进行绘制. 下面我们开始整个绘制 ...
带你使用canvas制作马赛克canvas飞鸟动画小球动画
文章目录 canvas制作马赛克&飞鸟动画&小球拖拽动画一.了解单像素操作 1.在canvas中的像素操作 2.得到场景像素数据 3.ImageData对象 4.在场景中写入像素数据 ...

利用canvas制作乱跑的小球

说明：将下面的代码放到html的body就可以，键盘控制上(W)下(S)左(A)右(D)

利用canvas制作乱跑的小球相关推荐

最新文章

热门文章