2010-11-18 1st nibushibu Follow 2010-11-18 02:21:31 License: MIT License Fork0 Fav1 View834 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 34 lines HTML 23 lines CSS 8 lines 2010-11-18 1st var canvas; var r = 0; var mx = 0; var my = 0; var cx = 0; var cy = 0; onload = function() { canvas = document.getElementById('canvasSample'); setInterval(draw,30); document.getElementById('canvasSample').onmousemove = function(e){ mx = e.pageX; my = e.pageY; } } var draw = function() { var ctx = canvas.getContext('2d'); r += 1; cx += (mx-cx)/16; cy += (my-cy)/16; ctx.clearRect(0,0,600,600); ctx.save(); ctx.translate(cx,cy); ctx.rotate((Math.PI/180)*r); ctx.fillStyle = "#75d236"; ctx.fillRect(-50,-50,100,100); ctx.restore(); } <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style> body{ background-color: #000; } </style> <title>Canvas テスト</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="excanvas.js"></script> <![endif]--> <script src="mousechaser2.js"></script> </head> <body> <canvas id="canvasSample" width="600" height="600"></canvas> </body> </html> 2010-11-18 1st /* html5doctor.com Reset Stylesheet v1.4 2009-07-27 Author: Richard Clark - http://richclarkdesign.com */ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body {line-height:1;}article,aside,dialog,figure,footer,header,hgroup,nav,section {display:block;}nav ul {list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}a {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent;}ins {background-color:#ff9;color:#000;text-decoration:none;}mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del {text-decoration: line-through;}abbr[title],dfn[title] {border-bottom:1px dotted #000;cursor:help;}table {border-collapse:collapse;border-spacing:0;}hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}input,select {vertical-align:middle;} var canvas; var r = 0; var mx = 0; var my = 0; var cx = 0; var cy = 0; onload = function() { canvas = document.getElementById('canvasSample'); setInterval(draw,30); document.getElementById('canvasSample').onmousemove = function(e){ mx = e.pageX; my = e.pageY; } } var draw = function() { var ctx = canvas.getContext('2d'); r += 1; cx += (mx-cx)/16; cy += (my-cy)/16; ctx.clearRect(0,0,600,600); ctx.save(); ctx.translate(cx,cy); ctx.rotate((Math.PI/180)*r); ctx.fillStyle = "#75d236"; ctx.fillRect(-50,-50,100,100); ctx.restore(); } <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style> body{ background-color: #000; } </style> <title>Canvas テスト</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="excanvas.js"></script> <![endif]--> <script src="mousechaser2.js"></script> </head> <body> <canvas id="canvasSample" width="600" height="600"></canvas> </body> </html> /* html5doctor.com Reset Stylesheet v1.4 2009-07-27 Author: Richard Clark - http://richclarkdesign.com */ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body {line-height:1;}article,aside,dialog,figure,footer,header,hgroup,nav,section {display:block;}nav ul {list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}a {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent;}ins {background-color:#ff9;color:#000;text-decoration:none;}mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del {text-decoration: line-through;}abbr[title],dfn[title] {border-bottom:1px dotted #000;cursor:help;}table {border-collapse:collapse;border-spacing:0;}hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}input,select {vertical-align:middle;} use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか？ Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/4Pw8/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/nibushibu/4Pw8" title="2010-11-18 1st">2010-11-18 1st - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Tweet twitter Tags canvas Favorite by paz: canvas Forked sort new page view favorite forked forked: 2010-11-18 1st mituu3215 00 42views 35/23/8
