Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use HTML5 to draw the shape of a tank", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "how to use HTML5 to draw the shape of a tank" this article.

The code is as follows:

Tag attribute: src: URL preload of music: preload auto playback: auto playback loop: loop playback control: the control bar of the browser must have been like a thunderstorm to HTML5, you can do a lot of things with HTML5, the following share with you the use of html5 to draw the shape of a tank, the specific code is as follows, interested people can refer to ha

The code is as follows:

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, 17, 0, 0, Math.PItem2, true)

Ctx.closePath ()

Ctx.fill ()

Ctx.strokeTyle= "# CCCC00"

Ctx.lineWidth=2

Ctx.moveTo (43 552)

Ctx.lineTo (43 and 10)

Ctx.stroke ()

Tag attribute: src: video URLposter: video cover, no picture preload displayed during playback: preload auto playback: auto playback loop: loop playback control: browser's own control bar width: video width height: video height

Get HTMLVideoElement and HTMLAudioElement objects

The code is as follows:

/ / audio can create objects directly through new

Media = newAudio ("http://www.abc.com/test.mp3")

/ / both audio and video can obtain objects through tags

Media = document.getElementById ("media")

Media methods and properties:

Both HTMLVideoElement and HTMLAudioElement inherit from HTMLMediaElement

The code is as follows:

/ / error status

Media.error; / / null: normal

Media.error.code; / / 1 . The user terminates 2. Network error 3. Decoding error 4.URL is invalid

/ / Network status

Media.currentSrc; / / returns the URL of the current resource

Media.src = value; / / returns or sets the URL of the current resource

Media.canPlayType (type); / / whether it can be played

Resource Media.networkState; / / 0 in some format. This element is not initialized 1. Normal but not using network 2. Downloading data 3. No resources found

Media.load (); / / reload the resources specified by src

Media.buffered; / / returns the buffered region, TimeRanges

Media.preload; / / none: do not preload metadata: preload resource information auto:

/ / status of preparation

Media.readyState; / / 1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA

Media.seeking; / / are you looking for

/ status

Media.currentTime = value; / / the position of the current player. The position can be changed by assigning values.

Media.startTime; / / is generally 0, but not 0 if it is a streaming media or a resource that does not start from 0

Media duration; / / current resource length stream returns infinite

Media.paused; / / whether to pause

Media.defaultPlaybackRate = value; / / alternate playback speed, which can be set

Media.playbackRate = value; / / current playback speed, which will be changed immediately after setting

Media.played;// returns the area that has been played, TimeRanges. For this object, see this

Media.seekable; / / returns the area TimeRanges that can be searched

Media.ended; / / whether to end or not

Media.autoPlay; / / whether to play automatically

Media.loop; / / whether to play in a loop or not

Media.play (); / / playback

Media.pause (); / / pause

/ / Control

Media.controls; / / whether there is a default control bar

Media.volume = value; / / Volume

Media.muted = value; / / mute

/ / TimeRanges (region) object

Number of TimeRanges.length; / / region segments

TimeRanges.start (index) / / start position of the first index segment area

TimeRanges.end (index) / / the end of the first index segment area

Events:

EventTester = function (e) {

Media.addEventListener (eQuery function () {

Console.log ((newDate ()). GetTime (), e)

})

}

EventTester ("loadstart"); / / the client starts to request data

EventTester ("progress"); / / the client is requesting data

EventTester ("suspend"); / / delayed download

EventTester ("abort"); / / the client initiatively terminates the download (not caused by an error)

EventTester ("error"); / / when requesting data

Encountered error eventTester ("stalled"); / / Network speed stall

Triggered when eventTester ("play"); / / play () and autoplay start playing

EventTester ("pause"); / / pause () triggers

EventTester ("loadedmetadata"); / / obtain the resource length successfully

EventTester ("loadeddata"); / /

EventTester ("waiting"); / / wait for data

Not error eventTester ("playing")

/ / start playback of eventTester ("canplay"); / / can be played, but may be paused due to loading

EventTester ("canplaythrough"); / / can be played, and all the songs have been loaded

EventTester ("seeking"); / / searching

EventTester ("search"); / / search completed

EventTester ("timeupdate"); / / playback time change

EventTester ("ended"); / / end of playback

EventTester ("ratechange"); / / playback rate change

EventTester ("durationchange"); / / Resource length change

EventTester ("volumechange"); / / Volume change

A paragraph of js written by myself:

The code is as follows:

$(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)

})

Function 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)

}

The above is all the contents of the article "how to draw the shape of a tank with HTML5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.