怎么用HTML5画出一个坦克的形状

这篇文章主要为大家展示了“怎么用HTML5画出一个坦克的形状”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“怎么用HTML5画出一个坦克的形状”这篇文章吧。

代码如下：

<audio>标签属性：class="lazy" data-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” class="lazy" data-src =“ http://www.abc.com/ test.mp3“控件> </ audio>

<video>标签属性：class="lazy" data-src：视频的URLposter：视频封面，没有播放时显示的图片预载：预加载自动播放：自动播放循环：循环播放控件：浏览器自带的控制条宽度：视频宽度高度：视频高度

<videoid =“ media” class="lazy" data-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.currentclass="lazy" data-src; //返回当前资源的URL

Media.class="lazy" data-src =值；//返回或设置当前资源的URL

Media.canPlayType（type）; //是否能播放

某种格式的资源Media.networkState; // 0。此元素未初始化1.正常但没有使用网络2.正在下载数据3.没有找到资源

Media.load（）; //重新加载class="lazy" data-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（）;

}，

class="lazy" data-src：function（url）{

this.box.class="lazy" data-src = url;

}，

currentTime：function（）{

return（this.box.currentTime / 60）.toFixed（2）;

}

};

Player.prototype.duration = function（）{

return（this.box.duration / 60）.toFixed（2）;

};

以上是“怎么用HTML5画出一个坦克的形状”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！