189 8069 5689
这篇文章主要为大家展示了“怎么用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();
获取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画出一个坦克的形状”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！