这篇文章主要为大家展示了“怎么用HTML5画出一个坦克的形状”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“怎么用HTML5画出一个坦克的形状”这篇文章吧。
代码如下:
<audio>标签属性:src:音乐的URL预加载:预加载自动播放:自动播放循环:循环播放控件:浏览器自带的控制条想必大家已对HTML5如雷贯耳了吧,利用HTML5可以做很多事情,下面与大家分享下利用html5画出一个坦克的形状,具体代码如下,感兴趣的各位可以参考下哈
代码如下:
var canvas=document.getElementById('myCanvas');
var ctx= canvas.getContext('2d');
ctx.fillStyle="#99FF66";
ctx.fillRect(10,10,15,80);
//ctx.fillRect(10,80,15,80);
var canvas=document.getElementById('myCanvas');
var ctx= canvas.getContext('2d');
ctx.fillStyle="#99FF66";
ctx.fillRect(60,10,15,80);
var canvas=document.getElementById('myCanvas');
var ctx= canvas.getContext('2d');
ctx.fillStyle="#0033CC";
ctx.fillRect(26,27,33,50);
ctx.fillStyle="red";
ctx.beginPath();
ctx.arc(43,52,17,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
ctx.strokeTyle="#CCCC00";
ctx.lineWidth=2;
ctx.moveTo(43,52);
ctx.lineTo(43,10);
ctx.stroke();
<audioid =“ media” src =“ http://www.abc.com/ test.mp3“控件> </ audio>
<video>标签属性:src:视频的URLposter:视频封面,没有播放时显示的图片预载:预加载自动播放:自动播放循环:循环播放控件:浏览器自带的控制条宽度:视频宽度高度:视频高度
<videoid =“ media” src =“ http://www.abc.com/test.mp4”控制width =“ 400px” heigt =“ 400px”> </ video>
获取HTMLVideoElement和HTMLAudioElement对象
代码如下:
// audio可以直接通过new创建对象
Media = newAudio(“ http://www.abc.com/test.mp3”);
// audio和video都可以通过标签获取对象
Media = document.getElementById(“ media”);
Media方法和属性:
HTMLVideoElement和HTMLAudioElement均继承自HTMLMediaElement
代码如下:
//错误状态
Media.error; // null:正常
Media.error.code; // 1。用户终止2.网络错误3.解码错误4.URL无效
//网络状态
Media.currentSrc; //返回当前资源的URL
Media.src =值;//返回或设置当前资源的URL
Media.canPlayType(type); //是否能播放
某种格式的资源Media.networkState; // 0。此元素未初始化1.正常但没有使用网络2.正在下载数据3.没有找到资源
Media.load(); //重新加载src指定的资源
Media.buffered; //返回已缓冲区域,TimeRanges
Media.preload; // none:不预载metadata:预载资源信息auto:
//准备状态
Media.readyState; // 1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media.seeking; //是否正在寻找
// //状态
Media.currentTime = value; //当前播放器的位置,赋值可更改位置
Media.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0
媒体持续时间;//当前资源长度流返回无限
Media.paused; //是否暂停
Media.defaultPlaybackRate =值; //交替播放速度,可以设置
Media.playbackRate =值; //当前播放速度,设置后马上改变
Media.played;//返回已经播放的区域,TimeRanges,关于此对象见此
Media.seekable; //返回可以搜索的区域TimeRanges
Media.ended; //是否结束
Media.autoPlay; //是否自动播放
Media.loop; //是否循环播放
Media.play(); //播放
Media.pause(); //暂停
//控制
Media.controls; //是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音
// TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index)//第一个索引段区域的开始位置
TimeRanges.end(index)//第一个索引段区域的结束位置
事件:
eventTester = function(e){
Media.addEventListener(e,function(){
console.log((newDate())。getTime(),e);
});
}
eventTester(“ loadstart”); //客户端开始请求数据
eventTester(“ progress”); //客户端正在请求数据
eventTester(“ suspend”); //延迟下载
eventTester(“ abort”); //客户端主动终止下载(不是因为错误引起),
eventTester(“ error”); //请求数据时
遇到错误eventTester(“ stalled”); //网速失速
eventTester(“ play”); // play()和autoplay开始播放时触发
eventTester(“ pause”); // pause()触发
eventTester(“ loadedmetadata”); //成功获取资源长度
eventTester(“ loadeddata”); //
eventTester(“ waiting”); //等待数据,
并非错误eventTester(“正在播放” );
//开始回放eventTester(“ canplay”); //可以播放,但中途可能因为加载而暂停
eventTester(“ canplaythrough”); //可以播放,歌曲全部加载完毕
eventTester(“ seeking”); //寻找中
eventTester(“寻找”); //寻找完毕
eventTester(“ timeupdate”); //播放时间改变
eventTester(“ ended”); //播放结束
eventTester(“ ratechange”); //播放速率更改
eventTester(“ durationchange”); //资源长度更改
eventTester(“ volumechange”); //音量改变
自己写的一段js:
代码如下:
$(function(){
var p = new Player();
p.read(“ play”);
$(“#stop”)。click(function(){
p.pause();
});
$(“# start“)。click(function(){
p.play();
});
$(”#show“)。click(function(){
alert(p.duration());
});
setInterval(function() {
$(“#currentTime”)。text(p.currentTime());
},1000);
});
函数Player(){};
Player.prototype = {
box:new Object(),
read:function(id){
this.box = document.getElementById(id);
},
play:function(){
this.box.play();
},
pause:function(){
this.box.pause();
},
src:function(url){
this.box.src = url;
},
currentTime:function(){
return(this.box.currentTime / 60).toFixed(2);
}
};
Player.prototype.duration = function(){
return(this.box.duration / 60).toFixed(2);
};
以上是“怎么用HTML5画出一个坦克的形状”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!