HTML5 Programming

1
Chapter04???(2)

• HTML5 Programming

2
Contents
1. ??? ????
2. ??? ????
3. ??? ????
3
? ??? ????

• ? ??? ????
• ?? ??? ? ??? ? ??, ? ??? ???, ?? ??? ?? ???, ? ?
  ?? ?? ??? ?? ?????? ??? ??? ? ? ??

4
? ??? ????

• ? ??? ????

5
? ? ????

• ? ? ????
• strokeStyle ??? ???
• ?? ?? ?? ??, ?? ??, RGB, RGBA ??? ??? ? ??

6
? ? ????

• ? ? ????

7
?? ??? ??? ??

• ?? ??? ??? ??
• lineCap ??? ???
• ? ? ??? lineTo() ???? ???? ?? ??? ?? ?? ??? ???
  ??? ???? lineJoin ??? ??

8
?? ??? ??? ??

• ?? ??? ??? ??

9
???? 3-2
01 lt!DOCTYPE htmlgt 02 lthtmlgt 03 ltheadgt 04
ltmeta charset"utf-8" /gt 05 lttitlegt ??? ???
lt/titlegt 06 ltscript type"text/javascript"gt 07
function rect() 08 09 var canvas
document.getElementById('canvas') 10 context
canvas.getContext('2d') 11 12
context.strokeRect(10,10,200,200) 13
context.fillRect(220,10,200,200) 14 15
context.fillRect(430,10,200,200) 16
context.clearRect(500,50,100,100) 17 18
lt/scriptgt 19 lt/headgt 20 21 ltbody
onload"rect()"gt 22 ltcanvas id"canvas"
width"700" height"400" 23 style"bordersolid
1px 000000"gt 24 canvas ???? 25 lt/canvasgt 26
lt/bodygt 27 lt/htmlgt
10
???? 4-1
01 lt!DOCTYPE htmlgt 02 lthtmlgt 03 ltheadgt 04
ltmeta charset"utf-8" /gt 05 lttitlegt ? ???
lt/titlegt 06 ltscript type"text/javascript"gt 07
function line() 08 09 var canvas
document.getElementById('canvas') 10 context
canvas.getContext('2d') 11 12
context.beginPath() 13 context.moveTo(10,50) 1
4 context.lineTo(200,350) 15
context.lineWidth 5 16 context.strokeStyle
'blue' 17 context.stroke() 18 19
context.beginPath() 20 context.moveTo(100,50)
21 context.lineTo(300,350) 22
context.lineTo(300,100) 23 context.lineWidth
10 24 context.strokeStyle
'rgb(255,0,0)' 25 context.stroke()
11
???? 4-1
27 context.beginPath() 28 context.moveTo(300,
50) 29 context.lineTo(500,350) 30
context.lineTo(500,100) 31 context.moveTo(550,
50) 32 context.lineTo(550,350) 33
context.lineWidth 25 34 context.strokeStyle
'00FF00' 35 context.lineCap 'round' 36
context.lineJoin 'butt' 37
context.stroke() 38 39 lt/scriptgt 40
lt/headgt 41 42 ltbody onload"line()"gt 43
ltcanvas id"canvas" width"700" height"400" 44
style"bordersolid 1px 000000"gt 45 canvas
???? 46 lt/canvasgt 47 lt/bodygt 48 lt/htmlgt
12
??? ??? ????

• ??? ??? ????
• ??? ??? ?? ??? ?? ?? fill() ???? ???? ??? ?? ???
  ?? fillStyle ??? ??
• ??? ?? ??? ?? ??? ? ?? ?? ???? ??? ? ??
• ?? ???? globalAlpha ??? ???? 01 ??? ?? ??? ? ??

13
??? ??? ????

• ??? ??? ????

14
??? ??? ????

• ????? ?? ????
• createLinearGradient() ???? ???? ?? ???????? ? ?
  ??? createRadialGradient() ???? ???? ?? ????? ???
  ? ? ??

15
??? ??? ????

• ????? ?? ????

16
???? 4-2
01 lt!DOCTYPE htmlgt 02 lthtmlgt 03 ltheadgt 04
ltmeta charset"utf-8" /gt 05 lttitlegt ?? ??? ????
lt/titlegt 06 ltscript type"text/javascript"gt 07
function rect() 08 09 var canvas
document.getElementById('canvas') 10 context
canvas.getContext('2d') 11 12
context.beginPath() 13 context.fillStyle
'blue' 14 context.globalAlpha 0.5 15
context.fillRect(50,50,200,300) 16 17
context.beginPath() 18 var rectstyle
context.createLinearGradient(250,50,200,300) 19
rectstyle.addColorStop(0,"yellow") 20
rectstyle.addColorStop(0.5,"red") 21
rectstyle.addColorStop(1,"blue") 22
context.fillStyle rectstyle 23
context.globalAlpha 1 24 context.fillRect(25
0,50,200,300) 25
26 context.beginPath() 27 context.lineWidth
10 28 context.strokeStyle 'green' 29
context.strokeRect(450,50,200,300) 30
context.fillStyle 'yellow' 31
context.fillRect(450,50,200,300) 32 33
lt/scriptgt 34 lt/headgt 35 36 ltbody
onload"rect()"gt 37 ltcanvas id"canvas"
width"700" height"400" 38 style"bordersolid
1px 000000"gt 39 canvas ???? 40
lt/canvasgt 41 lt/bodygt 42 lt/htmlgt
17
??? ??? ????

• ??? ??? ????
• ??????? ???? ?? 4?? ??? ???

18
??? ??? ????

• ??? ??? ????

19
???? 4-3
01 lt!DOCTYPE htmlgt 02 lthtmlgt 03 ltheadgt 04
ltmeta charset"utf-8" /gt 05 lttitlegt ??? ??? ????
lt/titlegt 06 ltscript type"text/javascript"gt 07
function shadow() 08 09 var canvas
document.getElementById('canvas') 10 context
canvas.getContext('2d') 11 12
context.beginPath() 13 context.shadowOffsetX
10 14 context.shadowOffsetY 10 15
context.shadowColor 'gray' 16
context.shadowBlur 1 17 context.fillRect(50,
50,100,250) 18 19 context.beginPath() 20
context.shadowOffsetX 10 21
context.shadowOffsetY 30 22
context.shadowColor 'blue' 23
context.shadowBlur 2 24 context.fillRect(250
,50,100,250) 25
26 context.beginPath() 27 context.shadowOffse
tX 30 28 context.shadowOffsetY 10 29
context.shadowColor 'green' 30
context.shadowBlur 3 31 context.fillRect(450
,50,100,250) 32 33 lt/scriptgt 34
lt/headgt 35 36 ltbody onload"shadow()"gt 37
ltcanvas id"canvas" width"700" height"400" 38
style"bordersolid 1px 000000"gt 39 canvas
???? 40 lt/canvasgt 41 lt/bodygt 42 lt/htmlgt
20
?? ????

• ?? ????
• globalCompositeOperation ??? ?? ?????? ??? ?? ???
  ???? ???? ??? ?? ??

21
globalCompositeOperation ?? ?
22
???? 4-4
01 lt!DOCTYPE htmlgt 02 lthtmlgt 03 ltheadgt 04
ltmeta charset"utf-8" /gt 05 lttitlegt ?? ????
lt/titlegt 06 ltscript type"text/javascript"gt 07
function xor() 08 09 var canvas
document.getElementById('canvas') 10 context
canvas.getContext('2d') 11 12 for (var i0
ilt50 i) 13 14 var arcstyle
context.createRadialGradient(i8,i8,0,i5,i5,30
0) 15 arcstyle.addColorStop(0,"orange") 16
arcstyle.addColorStop(1,"green") 17
context.fillStyle arcstyle 18 19
context.arc(i10,i10,50,0,2Math.PI,true) 20
context.fill() 21 22 context.globalCompositeO
peration "xor" 23 24 25 lt/scriptgt 26
lt/headgt 27
28 ltbody onload"xor()"gt 29 ltcanvas
id"canvas" width"500" height"500" 30
style"bordersolid 1px 000000"gt 31 canvas
???? 32 lt/canvasgt 33 lt/bodygt 34 lt/htmlgt
23
??? ????

• ??? ????
• ???? ???? ???? fill-Text() ???? strokeText() ????
  ??
• fillText() ???? strokeText() ???? ?? ??? ??? ???
  maxWidth ?? ??. maxWidth ?? ??? ???? ?? ????
  ????? ??? ??? ??

24
??? ????

• ??? ????

25
??? ????

• ??? ????

textAlign
textBaseline
26
??? ????
27
???? 4-5
01 lt!DOCTYPE htmlgt 02 lthtmlgt 03 ltheadgt 04
ltmeta charset"utf-8" /gt 05 lttitlegt ??? ????
lt/titlegt 06 ltscript type"text/javascript"gt 07
function text() 08 09 var canvas
document.getElementById('canvas') 10 context
canvas.getContext('2d') 11 12
context.beginPath() 13 var rectstyle
context.createLinearGradient(100,50,600,300) 14
rectstyle.addColorStop(0,"blue") 15
rectstyle.addColorStop(1,"red") 16
context.fillStyle rectstyle 17 18
context.shadowOffsetX 10 19
context.shadowOffsetY 10 20
context.shadowColor 'gray' 21
context.shadowBlur 10 22 23 context.font
"bold 50pt ??" 24 context.textAlign
'left' 25 context.textBaseline 'top' 26
context.fillText("??? ????",100,100) 27 28
lt/scriptgt 29 lt/headgt 30
31 ltbody onload"text()"gt 32 ltcanvas
id"canvas" width"700" height"400" 33
style"bordersolid 1px 000000"gt 34 canvas
???? 35 lt/canvasgt 36 lt/bodygt 37 lt/htmlgt
28
??? ????

• ??? ????
• ???? ???? ???? drawImage() ???? ??
• drawImage() ???? ???? ???? ??, ?? ??, ?? ?? ??? ?
  ???, 3?? ???? drawImage() ???? ??? ? ??

29
??? ????

• ??? ????

30
??? ????

• ??? ?? ????
• ??? ???? ???? ??? ??? ???? createPattern() ????
  ??
• createPattern() ??? ???? ??? ???? ??? ?? ??? ????
  ??

31
???? 4-6
01 lt!DOCTYPE htmlgt 02 lthtmlgt 03 ltheadgt 04
ltmeta charset"utf-8" /gt 05 lttitlegt ??? ????
lt/titlegt 06 ltscript type"text/javascript"gt 07
function androidimage() 08 09 var canvas
document.getElementById('canvas') 10 context
canvas.getContext('2d') 11 12 var android
new Image() 13 android.src 'android.jpg' 14
15 context.drawImage(android,10,10) 16
context.drawImage(android,200,10,300,300) 17 co
ntext.drawImage(android,10,10,100,100,550,10,100,3
00) 18 19 lt/scriptgt 20 lt/headgt 21 22
ltbody onload"androidimage()"gt 23 ltcanvas
id"canvas" width"700" height"400"
style"bordersolid 1px 000000"gt 24 canvas
???? 25 lt/canvasgt 26 lt/bodygt 27 lt/htmlgt