25

25.1

/ /

25.2
25.3

mdown
mup
mmove

SUMMARY

25-2

HTML5 ()

11.1

HTML5HTML5

PART 1

HTML5 ()

25-3

25

Canvas
Canvas

25.1

25-2

HTML5 ()

25.1

HTML5 ()

25-3

25

25-4

HTML5 ()

25.1

HTML5 ()

25-5

25

25-6

HTML5 ()

25.1

HTML5 ()

25-7

25

25-8

HTML5 ()

25.1

HTML5

HTML5 ()

25-9

25

/ /

25-10

HTML5 ()

25.1

HTML5 ()

25-11

25

25.2
JavaScript

<header> <aside>
<canvas>
<section id="paint-area">
<div class="container">
<canvas id="pCanvas"
height="620" width="800px"
onmousedown="mdown(event)">
</canvas>
</div>
<div class="container">
<button onclick="clearCanvas()">
</button>
<button onclick="play()">
</button>
<button onclick="save()">
</button>
</div>
</section>

<aside> <ul>

<aside>
<div id="controlPanel">

()

25-12

HTML5 ()

25.2

<div id="tool">
<ul>
<li>
<img id="rect" src="images/rect.png"
onclick="toolClickHandler(this)" />
</li>

</ul>
<ul>
<li>
<img id="line" src="images/line.png"
onclick="toolClickHandler(this)" />
</li>

</ul>
<ul>
<li>
<img id="ppen-black" src="images/ppen-black.png"
onclick="toolClickHandler(this)" />
</li>

</ul>
<ul>
<li>
<img id="eraser" src="images/eraser.png"
onclick="toolClickHandler(this)" alt=" " />
</li>
</ul>
</div>

<li> <img>
onclick
<li> CSS
<div>

<ul id="lineWidth">
<li lw="28" onclick="lineClickHandler(this)"
style="border-left: 22px solid;"></li>
<li lw="16" onclick="lineClickHandler(this)"
style="border-left: 18px solid;"></li>

</ul>
</div>
</div>
</aside>

lw onclick
lw

HTML5 ()

25-13

25

<table>
<table>
<tbody>
<tr>
<td style="background:
</td>
<td style="background:
</td>
<td style="background:
</td>
<td style="background:
</td>
</tr>

</tbody>
</table>

#330033;">
#CC0033;">
#3300CC;">
#CC00CC;">

<td>
<tr>

<ul>
<ul id="lineOpacity">
<li tp="1.0" onclick="tpClickHandler(this)"
<li tp="0.8" onclick="tpClickHandler(this)"
<li tp="0.6" onclick="tpClickHandler(this)"
<li tp="0.4" onclick="tpClickHandler(this)"
<li tp="0.2" onclick="tpClickHandler(this)"
<li tp="0.1" onclick="tpClickHandler(this)"
</ul>

style="opacity:
style="opacity:
style="opacity:
style="opacity:
style="opacity:
style="opacity:

1.0;"></li>
0.8;"></li>
0.6;"></li>
0.4;"></li>
0.2;"></li>
0.1;"></li>

<li> tp
style <li>

25.3
JavaScript
JavaScript

25-14

paint.js

drag.js

HTML5 ()