65
g Dr a w i n g Co n t e xt .
l i n e To o (0 0 . 5 + x, kPi i xe l He i g h t );
}
/ * h h o r i zo n t a l l l i n e s */
fo r (v v a r y = = 0 0 ; y < < = kPi i xe l He i g h t ; y += = kPi i e c e e He e i g h t ) {
g Dr a w i n g Co n t e xt .
m o v e To o (0 0 , 0 0 . 5 + y);
g Dr a w i n g Co n t e xt .
l i n e To o (kPi i xe l Wi d t h , 0 0 . 5 + y);
}
/ * d d r a w i i t ! */
g Dr a w i n g Co n t e xt .
s t r o ke St yl e e = = " " #c c c " ;
g Dr a w i n g Co n t e xt .
s t r o ke ();
e real fun begins when we go to draw ea of the individual pieces. A piece is a circle,
something we haven’t drawn before. Furthermore, if the user selects a piece in anticipation of
moving it, we want to draw that piece as a filled-in circle. Here, the argument
p
represents a
piece, whi has
r o w
and
c o l u m n
properties that denote the piece’s current location on the
board. We use some in-game constants to translate
(c o l u m n , r r o w )
into canvas-relative
(x,
y)
coordinates, then draw a circle, then (if the piece is selected) fill in the circle with a solid
color.
fu n c t i o n d d r a w Pi e c e (p, s s e e l e c t e d ) {
v a r c c o l u m n = = p. . c o l u m n ;
v a r r r o w = = p. . r o w ;
v a r
x = = (c c o l u m n * kPi i e c c e e Wi d t h ) + (kPi i e c e Wi d t h / / 2 2 );
v a r
y = = (r r o w * kPi i e c e He e i i g h t ) + (kPi i e c e He i g h t / 2 2 );
v a r r r a d i u s = = (kPi i e c e Wi d d t t h / 2 ) - (kPi i e c e Wi d t h / 10 0 );
at’s the end of the game-specific logic. Now we have
(x, y)
coordinates, relative to the
canvas, for the center of the circle we want to draw. ere is no
c i r c c l l e ()
method in the
canvas API, but there is an
a r c ()
method. And really, what is a circle but an arc that goes
all the way around? Do you remember your basic geometry? e
a r c c ()
method takes a
center point
(x, y)
, a radius, a start and end angle (in radians), and a direction flag (
fa l s e
for clowise,
t r u e
for counter-clowise). You can use the
Ma t h
module that’s built into
JavaScript to calculate radians.
g Dr a w i n g Co n t e xt . be g i n Pa a t t h ();
diveintohtml5.org
LET’S CALL IT A DRAW(ING SURFACE)
52
g Dr a w i n g Co n t e xt .
a r c c (x, y, r r a d i u s , 0 0 ,
Ma t h . PI * 2 2 , fa a l s e );
g Dr a w i n g Co n t e xt . c l o s e Pa a t t h ();
But wait! Nothing has been drawn yet. Like
m o v e To ()
and
l i n e To
, the
a r c ()
method is
a
“pencil” method. To actually draw the circle, we need to set the
s t r o ke St yl e
and call
s t r o ke ()
to trace it in “ink.”
g Dr a w i n g Co n t e xt .
s t r o ke St yl e e = = " " #0 0 0 " ;
g Dr a w i n g Co n t e xt .
s t r o ke ();
What if the piece is selected? We can re-use the same path we created to draw the outline of
the piece, to fill in the circle with a solid color.
i f (s s e l e c t e d ) {
g Dr a w i n g Co n t e xt .
fi l l St yl e e = = " " #0 0 0 " ;
g Dr a w i n g Co n t e xt .
fi l l ();
}
And that’s… well, that’s prey mu it. e rest of the program is game-specific logic —
distinguishing between valid and invalid moves, keeping tra of the number of moves,
detecting whether the game is over. With 9 circles, a few straight lines, and 1
o n c l i c k
handler, we’ve created an entire game in
< c a n v a s >
. Huzzah!
❧❧
FURTHER READING
FURTHER READING
Canvas tutorial on Mozilla Developer Center
HTML5
c a n v a s
— the basics, by Mihai Sucan
CanvasDemos.com: demos, tools, and tutorials for the HTML
c a a n n v a s
element
e
c a n v a s
element in the HTML5 dra standard
❧❧
diveintohtml5.org
LET’S CALL IT A DRAW(ING SURFACE)
24
is has been “Let’s Call It A Draw(ing Surface).” e
full table of contents has more if you’d
like to keep reading.
DID YOU KNOW?
DID YOU KNOW?
In association with Google Press, O’Reilly is
distributing this book in a variety of formats, including
paper, ePub, Mobi, and DRM-free PDF. e paid
edition is called “HTML5: Up & Running,” and it is
available now. is apter is included in the paid
edition.
If you liked this apter and want to show your
appreciation, you can
buy “HTML5: Up & Running”
with this affiliate link or
buy an electronic edition
directly from O’Reilly. You’ll get a book, and I’ll get a
bu. I do not currently accept direct donations.
Copyright MMIX–MMX
Mark Pilgrim
powered by Google™
Search
diveintohtml5.org
LET’S CALL IT A DRAW(ING SURFACE)
VB.NET PDF - Acquire or Save PDF Image to File NET Annotate PDF in WPF, C#.NET PDF Create, C#.NET search text in PDF, C#.NET edit PDF bookmark, C#.NET NET TWAIN Scanning DLLs: Scan Many Pages into One PDF.
add bookmarks to pdf file; export pdf bookmarks to excel
30
☞
You are here:
Home ‣
Dive Into HTML5 ‣
№№66.
YOU ARE HERE
YOU ARE HERE
(AND SO IS EVERYBODY
(AND SO IS EVERYBODY
ELSE)
ELSE)
show table of contents
❧❧
DIVING IN
DIVING IN
eolocation is the art of figuring out where you are in the world and
(optionally) sharing that information with people you trust. ere is more than
one way to figure out where you are — your IP address, your wireless network
connection, whi cell tower your phone is talking to, or dedicated GPS
hardware that calculates latitude and longitude from information sent by satellites in the sky.
ASK PROFESSOR MARKUP
ASK PROFESSOR MARKUP
Q: Geolocation sounds scary. Can I turn it off?
A: Privacy is an obvious concern when you’re
talking about sharing your physical location
with a remote web server. e
geolocation API
explicitly states: “User Agents must not send
diveintohtml5.org
YOU ARE HERE (AND SO IS EVERYBODY ELSE)
C# PDF - Acquire or Save PDF Image to File scanners and digital cameras) automatically and saving the images to file in C#.NET application. C#.NET TWAIN Scanning DLLs: Scan Many Pages into One PDF.
create bookmarks in pdf; bookmarks in pdf files
48
location information to Web sites without the
express permission of the user.” In other words,
sharing your location is always opt-in. If you
don’t want to, you don’t have to.
❧❧
THE GEOLOCATION API
THE GEOLOCATION API
e
geolocation API lets you share your location with trusted web sites. e latitude and
longitude are available to JavaScript on the page, whi in turn can send it ba to the remote
web server and do fancy location-aware things like finding local businesses or showing your
location on a map.
As you can see from the following table, the geolocation API is supported by most browsers
on the desktop and mobile devices. Additionally, some older browsers and devices can be
supported by wrapper libraries, as we’ll see later in this apter.
GEOLOCATION
GEOLOCATION APIAPI SUPPORT
SUPPORT
IE
FIREFOX
FIREFOX
SAFARI
SAFARI
CHROME
CHROME
OPERA
OPERA
IPHONE
IPHONE
ANDROID
ANDROID
·
3.5+
5.0+
5.0+
10.6+
3.0+
2.0+
Along with support for the standard geolocation API, there are a plethora of device-specific
APIs on other mobile platforms. I’ll cover all that later in this apter.
❧❧
SHOW ME THE CODE
SHOW ME THE CODE
e geolocation API centers around a new property on the global
n a v i i g g a t t o o r
object:
diveintohtml5.org
YOU ARE HERE (AND SO IS EVERYBODY ELSE)
VB Imaging - VB ISBN Barcode Tutorial use .NET solution that is designed to create ISBN barcode Automatically compute and add check digit for ISBN barcode document files in VB.NET like PDF & Word.
copy pdf bookmarks; add bookmark pdf file C# Imaging - Scan Linear ISSN in C#.NET Detect orientation of scanned ISSN barcode automatically from image files using C#. Integrated with PDF controlling library to scan ISSN barcode from PDF
bookmarks pdf; create bookmarks pdf file
44
f u u n c t t i i o n g g e t t _ _ l o c c a a t i o o n n ( ) ) {
i f f (
M o o d e e r r n i z z r r . g e e o o l o o c c a t i i o o n n ) ) {
n a a v i g g a a t o r r . . g e e o o l o c c a a t i o o n n . g g e e t C u u r r r e n n t t P o o s s i t i i o o n ( s s h h o w w _ _ m a p p ) ) ;
} e e l s s e e {
// n n o o n n a t t i i v e e s s u p p p p o r t t ; ; m m a a ybe e t t r y Ge e a a r s ?
}
}
n a a v i g g a a t o r r . . g e e o o l o c c a a t i o o n
.
e simplest use of the geolocation API looks like this:
f u n n c c t i o o n n g g e e t _ l l o o c a t t i i o n n ( ( ) {
n a v v i i g a t t o o r . . g g e o l l o o c a t t i i o n n . . g e t t C C u r r r e e n t t P P o s i i t t i o n ( s h h o o w _ m m a a p ) ) ;
}
at has no detection, no error handling, and no options. Your web application should
probably include at least the first two of those. To
detect support for the geolocation API, you
can use
Modernizr:
⇜⇜
I CAN
I CAN
HAS GEO?
HAS GEO?
What you do without geolocation support is up to you. I’ll explain the Gears fallba option
in a minute, but first I want to talk about what happens during that call to
g e e t C u u r r r e n n t t P o o s s i t i i o o n ( )
. As
I mentioned at the beginning of this apter, geolocation
support is opt-in. at means your browser will never force you to reveal your current
physical location to a remote server. e user experience differs from browser to browser. In
Mozilla Firefox, calling the
g e t t C C u r r r e e n t t P P o s i i t t i o n n ( ( )
function of the geolocation API will
cause the browser to pop up an “infobar” at the top of the browser window. e infobar looks
like this:
ere’s a lot going on here. You, as the end user,
are told that a website wants to know your location
are told whi website wants to know your location
can cli through to
Mozilla’s “Location-Aware Browsing” help page whi explains what
the he is going on
diveintohtml5.org
YOU ARE HERE (AND SO IS EVERYBODY ELSE)
52
can oose to share your location
can oose not to share your location
can tell your browser to remember your oice (either way, share or don’t share) so you
never see this infobar again on this website
Furthermore, this infobar is
non-modal, so it won’t prevent you from switing to another browser window or tab
tab-specific, so it will disappear if you swit to another browser window or tab and
reappear when you swit ba to the original tab
unconditional, so there is no way for a website to bypass it
bloing, so there is no ance that the website can determine your location while it’s
waiting for your answer
You just saw the JavaScript code that causes this infobar to appear. It’s a single function call
whi takes a callba function (whi I called
s h o o w w _ m a a p
). e call to
g e e t C u u r r r e n n t t P o o s s i t i i o o n ( )
will return immediately, but that doesn’t mean that you have
access to the user’s location. e first time you are guaranteed to have location information is
in the callba function. e callba function looks like this:
f u n n c c t i o o n n s s h h o w _ _ m m a p ( ( p p o s s i i t i o o n n ) {
v a r r l l a t t i i t u u d d e = p p o s s i i t i i o o n . c c o o o r d d s s . l l a a t i t t u u d e ;
v a r r l l o n n g g i t t u u d e = p p o o s s i t t i i o n . . c c o o r r d d s . . l l o n g g i i t u d d e e ;
// l l e t 's s s h h o w a a m m a a p p o o r r d d o o s s o m m e e t h h i i n g i i n t e e r r e s s t t i n g g !
}
e callba function will be called with a single parameter, an object with two properties:
c o o o r d d s
and
t i i m m e s t t a a m p
. e timestamp is just that, the date and time when the location was
calculated. (Since this is all happening asynronously, you can’t really know when that will
happen in advance. It might take some time for the user to read the infobar and agree to
share their location. Devices with dedicated GPS hardware may take some more time to
connect to a GPS satellite. And so on.) e
c o o o o r d s
object has properties like
l a a t t i t u u d d e
and
l o o n g i i t t u d e
whi are exactly what they sound like: the user’s physical location in the world.
POSITION OBJECT
POSITION OBJECT
Property
Type
Notes
c o o o r r d d s . l l a a t i t t u u d e
double
decimal degrees
c o o o r r d d s . l l o o n g i i t t u d d e
double
decimal degrees
diveintohtml5.org
YOU ARE HERE (AND SO IS EVERYBODY ELSE)
68
c o o o r r d d s . a a l l t i t t u u d e
double or
n u l l
meters above the
reference ellipsoid
c o o o r r d d s . a a c c c u r r a a c y
double
meters
c o o o r r d d s . a a l l t i t t u u d e e Ac c c u u r r a c y
double or
n u l l
meters
c o o o r r d d s . h h e e a d i i n n g
double or
n u l l
degrees clowise from
true north
c o o o r r d d s . s s p p e e d
double or
n u l l
meters/second
t i i m e e s s t a m m p
DOMTimeStamp like a
Da t e e ( ( )
object
Only three of the properties are guaranteed to be there
(
c o o o r r d d s . l l a a t i t t u u d e
,
c o o o r r d s . . l l o n n g g i t u u d d e
, and
c o o o r d d s s . a c c c c u r r a a c y
). e rest might come ba
n u u l l l
,
depending on the capabilities of your device and the baend
positioning server that it talks to. e
h e e a a d i n n g
and
s p e e e e d
properties are calculated based on the user’s previous position,
if possible.
❧❧
HANDLING ERRORS
HANDLING ERRORS
Geolocation is complicated. ings can go wrong. I’ve mentioned the “user consent” angle
already. If your web application wants the user’s location but the user doesn’t want to give it
to you, you’re screwed. e user always wins. But what does that look like in code? It looks
like the second argument to the
g e t t C C u r r r e e n t t P P o s i i t t i o n n ( ( )
function: an error handling
callba function.
n a v v i i g a t t o o r . . g g e o l l o o c a t t i i o n n . . g e t t C C u r r r e e n t t P P o s i i t t i o n n (
s h o o w w _ m a a p p ,
h a n d d l l e _ e e r r r o o r r )
If anything goes wrong, your error callba function will be called with a
P o o s i t t i i o n n Er r r o o r
object.
POSITIONERROR OBJECT
POSITIONERROR OBJECT
Property
Type
Notes
c o o d e
short
an enumerated value
diveintohtml5.org
YOU ARE HERE (AND SO IS EVERYBODY ELSE)
54
☞
m e e s s s a a g e
DOMString
not intended for end users
e
c o o d d e
property will be one of
P ERM M ISSION_ DENIED
(
1
) if the user clis that “Don’t Share” buon or otherwise
denies you access to their location.
P OSITION_ _ UNAVAILABLE
(
2
) if the network is down or the positioning satellites can’t
be contacted.
TIM EOUT
(
3
) if the network is up but it takes too long to calculate the user’s position.
How long is “too long”? I’ll show you how to define that in the next section.
UNKNOWN_ ERROR
(
0
) if anything else goes wrong.
↶↶
Be gracious in defeat
Be gracious in defeat
f u n n c c t i o o n n h h a a n d l l e e _ e r r r r o r r ( ( e r r r ) ) {
i f (
e r r r . . c o o d d e e == 1) ) {
// u u s e r r s s a a i i d n n o o !
}
}
ASK PROFESSOR MARKUP
ASK PROFESSOR MARKUP
Q: Does the geolocation API work on the
International Space Station, on the moon, or on
other planets?
A:
e geolocation specification states, “e
geographic coordinate reference system used by
the aributes in this interface is the World
Geodetic System (2d) [WGS84]. No other
reference system is supported.” e
International Space Station is orbiting Earth, so
astronauts on the station can describe their
location by latitude, longitude, and altitude.
However, the World Geodetic System is Earth-
centric, so it can’t be used to describe locations
on the moon or on other planets.
diveintohtml5.org
YOU ARE HERE (AND SO IS EVERYBODY ELSE)
Documents you may be interested
Documents you may be interested
