2010-11-18 1st nibushibu Follow 2010-11-18 02:21:31 License: MIT License Fork0 Fav1 View608 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 Tweet QR code Embed Design view Code view <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> zip tags Tweet twitter Tags canvas Favorite by paz: canvas Forked sort new page view favorite forked forked: 2010-11-18 1st mituu3215 00 10views 35/23/8
