html a标签指定区域,第四讲：使用html5中的canvas标签画出一个球在指定区域内的运动...

小球在一个区域运动

var canvas = document.getElementById('mc');

var cxt = canvas.getContext('2d');

//定义一个小球

var ball = {

position : {x : 100,y : 100},//球的位置

r : 30,//球的半径

vx : 300,//球在X轴的速度

vy : 200//球在Y轴的速度

};

var cyc = 10;

var somethingAsync = eval(Jscex.compile("async", function () {

//结合物理里面的知识即可

while (true) {

cxt.fillStyle = "rgba(0, 0, 0, .1)";

cxt.fillRect(0, 0, canvas.width, canvas.height);

cxt.fillStyle = "#FA340A";

cxt.beginPath();

cxt.arc(ball.position.x, ball.position.y, ball.r, 0, Math.PI * 2, true);

cxt.closePath();

cxt.fill();

//与左右两边碰撞只需X轴的方向相反即可

if(ball.position.x + ball.r > canvas.width || ball.position.x < ball.r ) ball.vx *= -1;

//上下两边相撞只需Y轴的方向相反即可

if(ball.position.y + ball.r > canvas.height || ball.position.y < ball.r ) ball.vy *= -1;

//在判断完成之后再进行球的移动

ball.position.x += ball.vx * cyc /1000;

ball.position.y += ball.vy * cyc /1000;

$await(Jscex.Async.sleep(cyc));

}

}));

somethingAsync().start();

html a标签指定区域,第四讲：使用html5中的canvas标签画出一个球在指定区域内的运动...相关推荐

img 标签点击跳出图层_如何用PS在一个图层里画出一个会动的太极八卦图|教程...
如何用PS的加减运算做出一个标准的八卦图(超详细步骤,小白福利),首先要考虑八卦图一共用了几个圆,每个圆与每个圆之间的联系. 首先ctrl+n新建一个画板(宽和高随便设置) 用矢量工具来画八卦图,什么 ...
html的canvas标签用法,html5中关于canvas标签用法（绘图）
标签只是图形容器,您必须使用脚本来绘制图形. 用canvas配合javascript可以直接在html页面动态绘图,无需调用jquery. 代码如下: var my_canvas=document.g ...
html5引入的新标签canvas,HTML页面中添加Canvas标签示例
怎样在html5中添加canvas标签标签是 HTML 5 中的新标签. 定义和用法标签定义图形,比如图表和其他图像. 标签只是图形容器,您必须使用脚本来绘制图形. 实例通过 canvas 元素 ...
tf第四讲：tf中的循环tf.while_loop，条件tf.cond，比较、数学运算、类型转换
大家好,我是爱编程的喵喵.双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中.从事机器学习以及相关的前后端开发工作.曾在阿里云.科大讯飞.CCF等比赛获得多次Top名次.现 ...
html去掉nav的圆点,web前端分享HTML5中的nav标签
web前端分享HTML5中的nav标签,nav标签全称navigation,顾名思义,是导航的意思.根据HTML5的相关标准定义如下: "A section of a page that l ...
web前端分享HTML5中的nav标签学习笔记
好程序员web前端分享HTML5中的nav标签学习笔记,nav标签全称navigation,顾名思义,是导航的意思.根据HTML5的相关标准定义如下: "A section of a pag ...
[html] html5中的meta标签renderer有什么作用？
[html] html5中的meta标签renderer有什么作用? 指定双核浏览器,默认以什么浏览器方式渲染页面个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎 ...
html中form标签的作用style,HTML5中meta常用标签属性说明
HTML5中meta常用标签属性说明 IE 兼容模式,Bootstrap 不支持 IE 古老的兼容模式.为了让 IE 浏览器运行最新的渲染模式下,建议将此标签加入到你的页面中: content属性 ...
ie8 html 语音标签,让IE8支持html5中的video标签
这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本在里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. ②又要无休止的找ie8的解决方法,自 ...

html a标签指定区域,第四讲：使用html5中的canvas标签画出一个球在指定区域内的运动...

html a标签指定区域,第四讲：使用html5中的canvas标签画出一个球在指定区域内的运动...相关推荐

最新文章

热门文章