js canvasスキャナー動画
9804 ワード
"text-align: center;">
"button" value="start" onClick="doStart();"/>
"button" value="stop" onClick="doStop();"/>
"text/javascript"</span>>
var valTool = new Object()<span class="hljs-comment">;</span>
valTool<span class="hljs-preprocessor">.flag</span> = false<span class="hljs-comment">;</span>
valTool<span class="hljs-preprocessor">.scale</span> = <span class="hljs-number">0.5</span><span class="hljs-comment">;</span>
initTurnEarth(valTool)<span class="hljs-comment">;</span>
function doStart()
{
valTool<span class="hljs-preprocessor">.flag</span> = true<span class="hljs-comment">;</span>
initTurnEarth(valTool)<span class="hljs-comment">;</span>
}
function doStop()
{
valTool<span class="hljs-preprocessor">.flag</span> = false<span class="hljs-comment">;</span>
}
function initTurnEarth(valTool)
{
var mycv = document<span class="hljs-preprocessor">.getElementById</span>(<span class="hljs-string">"earth"</span>)<span class="hljs-comment">; </span>
var dr = mycv<span class="hljs-preprocessor">.getContext</span>(<span class="hljs-string">"2d"</span>)<span class="hljs-comment">;</span>
var earth = new Object()<span class="hljs-comment">;</span>
earth<span class="hljs-preprocessor">.img</span> = new Image()<span class="hljs-comment">;</span>
earth<span class="hljs-preprocessor">.img</span><span class="hljs-preprocessor">.src</span> = <span class="hljs-string">"img/earth.png"</span><span class="hljs-comment">; </span>
var search = new Object()<span class="hljs-comment">;</span>
search<span class="hljs-preprocessor">.img</span> = new Image()<span class="hljs-comment">;</span>
search<span class="hljs-preprocessor">.img</span><span class="hljs-preprocessor">.src</span> = <span class="hljs-string">"img/earth_search.png"</span><span class="hljs-comment">; </span>
mycv<span class="hljs-preprocessor">.width</span> = earth<span class="hljs-preprocessor">.img</span><span class="hljs-preprocessor">.width</span> * valTool<span class="hljs-preprocessor">.scale</span><span class="hljs-comment">;</span>
mycv<span class="hljs-preprocessor">.height</span> = earth<span class="hljs-preprocessor">.img</span><span class="hljs-preprocessor">.height</span> * valTool<span class="hljs-preprocessor">.scale</span><span class="hljs-comment">; </span>
earth<span class="hljs-preprocessor">.x</span> = <span class="hljs-number">0</span><span class="hljs-comment">;</span>
earth<span class="hljs-preprocessor">.y</span> = <span class="hljs-number">0</span><span class="hljs-comment">;</span>
search<span class="hljs-preprocessor">.x</span> = <span class="hljs-number">117</span><span class="hljs-comment">;</span>
search<span class="hljs-preprocessor">.y</span> = <span class="hljs-number">6</span><span class="hljs-comment">;</span>
valTool<span class="hljs-preprocessor">.degree</span> = <span class="hljs-number">0</span><span class="hljs-comment">;</span>
valTool<span class="hljs-preprocessor">.speed</span> = <span class="hljs-number">5</span><span class="hljs-comment">;</span>
doTurnEarth(valTool,dr,earth,search)<span class="hljs-comment">;</span>
}
function doTurnEarth(valTool,dr,earth,search)
{
valTool<span class="hljs-preprocessor">.degree</span> = valTool<span class="hljs-preprocessor">.degree</span> + valTool<span class="hljs-preprocessor">.speed</span><span class="hljs-comment">;</span>
if ( valTool<span class="hljs-preprocessor">.degree</span> > <span class="hljs-number">360</span>) { valTool<span class="hljs-preprocessor">.degree</span> = <span class="hljs-number">0</span>}<span class="hljs-comment">;</span>
//
dr<span class="hljs-preprocessor">.clearRect</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,earth<span class="hljs-preprocessor">.img</span><span class="hljs-preprocessor">.width</span>,earth<span class="hljs-preprocessor">.img</span><span class="hljs-preprocessor">.height</span>)<span class="hljs-comment">;</span>
dr<span class="hljs-preprocessor">.save</span>()<span class="hljs-comment">;</span>
//
dr<span class="hljs-preprocessor">.scale</span>(<span class="hljs-number">0.5</span>,<span class="hljs-number">0.5</span>)<span class="hljs-comment">;</span>
dr<span class="hljs-preprocessor">.drawImage</span>(earth<span class="hljs-preprocessor">.img</span>,earth<span class="hljs-preprocessor">.x</span>,earth<span class="hljs-preprocessor">.y</span>)<span class="hljs-comment">;</span>
//
if(valTool<span class="hljs-preprocessor">.degree</span> > <span class="hljs-number">0</span> && valTool<span class="hljs-preprocessor">.degree</span> < <span class="hljs-number">30</span> )
{
dr<span class="hljs-preprocessor">.beginPath</span>()<span class="hljs-comment">;</span>
dr<span class="hljs-preprocessor">.arc</span>(earth<span class="hljs-preprocessor">.img</span><span class="hljs-preprocessor">.width</span>/<span class="hljs-number">2</span>+search<span class="hljs-preprocessor">.img</span><span class="hljs-preprocessor">.width</span>/<span class="hljs-number">2</span>, search<span class="hljs-preprocessor">.img</span><span class="hljs-preprocessor">.height</span>/<span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">0</span>, Math<span class="hljs-preprocessor">.PI</span>*<span class="hljs-number">2</span>)<span class="hljs-comment">;</span>
dr<span class="hljs-preprocessor">.closePath</span>()<span class="hljs-comment">;</span>
dr<span class="hljs-preprocessor">.fillStyle</span> = <span class="hljs-string">"white"</span><span class="hljs-comment">;</span>
dr<span class="hljs-preprocessor">.fill</span>()<span class="hljs-comment">;</span>
}
// - -
dr<span class="hljs-preprocessor">.translate</span>((search<span class="hljs-preprocessor">.x</span>),(search<span class="hljs-preprocessor">.y</span> + (search<span class="hljs-preprocessor">.img</span><span class="hljs-preprocessor">.height</span>)))<span class="hljs-comment">;</span>
dr<span class="hljs-preprocessor">.rotate</span>( valTool<span class="hljs-preprocessor">.degree</span> * <span class="hljs-number">2</span> * Math<span class="hljs-preprocessor">.PI</span> / <span class="hljs-number">360</span>)<span class="hljs-comment">;</span>
dr<span class="hljs-preprocessor">.translate</span>(-(search<span class="hljs-preprocessor">.x</span>),-(search<span class="hljs-preprocessor">.y</span> + (search<span class="hljs-preprocessor">.img</span><span class="hljs-preprocessor">.height</span>)))<span class="hljs-comment">;</span>
dr<span class="hljs-preprocessor">.drawImage</span>(search<span class="hljs-preprocessor">.img</span>,search<span class="hljs-preprocessor">.x</span>,search<span class="hljs-preprocessor">.y</span>)<span class="hljs-comment">;</span>
//
dr<span class="hljs-preprocessor">.restore</span>()<span class="hljs-comment">;</span>
if(valTool<span class="hljs-preprocessor">.flag</span>)
{
setTimeout(function(){ doTurnEarth(valTool,dr,earth,search)<span class="hljs-comment">;},60); </span>
}
}