- 締切済み
HTML5 canvas について教えてください！
HTML5 canvas についての質問です!! 私はいまHTML5で作品を作ろうと思っています。htnlやcssなどの基本知識は持っているつもりです。 新しくHTML5、canvasの勉強を開始したばかりです。canvasで単純に線を描写すること は理解できるんですが… 例えば座標（0．0）にある画像をクリックすると、座標（100.100）にある画像まで徐々に線が伸びていくという動き（トゥーイン）をさせたいんですがそれがわかりませんっ どなたか教えてくださ!!
- uheimorik
- お礼率0% (0/1)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
ちょっと、おもいついたままに。なのでいつものようにいけてない。 ぜんかくくうはくは、はんかくにするか、たぶこーどにするか。 なんとなく、ひだりうえをくりっく。 ひきすうhを1にするのは、だそく。 <!DOCTYPE html> <meta charset="utf-8"> <title>korega CG?</title> <style> canvas { border : 1px red solid; } </style> <body> <h1>LINE</h1> <canvas width="400" height="400" id="hoge"></canvas> <script> function animeLine (a,b,c,d,e,f,g, h) { var ctx = a.getContext('2d'); var x = b, y = c; var sx = (d - b) / f; var sy = (e - c) / f; var ct = f; var mx = a.offsetWidth; var my = a.offsetHeight; (function LOOP () { ctx.beginPath (); if (h) { ctx.moveTo (0, y); ctx.lineTo (x, e); } else { ctx.clearRect (0, 0, mx, my) ctx.moveTo (b, c); ctx.lineTo (x, y); } ctx.closePath (); ctx.stroke (); x += sx; y += sy; if (ct--) setTimeout (LOOP, g); }) (); } function clickHandler (event) { var tgt = event.target; var pos = tgt.getBoundingClientRect(); var psx = (event.pageX - pos.left) / 20 |0; var psy = (event.pageY - pos.top) / 20 |0; if (! (psx + psy)) animeLine (tgt, psx, psy, 400, 400, 50, 20/*, 1*/); } document.querySelector ('#hoge'). addEventListener ('click', clickHandler, false); </script>
