検索

ホームページ  >  記事  >  ウェブフロントエンド  >  html5 キャンバスは、マウスの回転_html5 チュートリアルのスキルに従う矢印を実装します。

html5 キャンバスは、マウスの回転_html5 チュートリアルのスキルに従う矢印を実装します。

WBOY
WBOYオリジナル
2016-05-16 15:51:422781ブラウズ

この記事の例は全員と共有されます

XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  2. <html>
  3. <頭>
  4. <メタ charset="utf- 8" />
    5. " X-ua 互換 "
  5. コンテンツ = " ie =edge " /// > <title>キャンバスはマウスの回転に従う矢印を実装します < ; /
    6. タイトル
  6. > <スタイル>
    7. *{パディング: 0;マージン: 0}
  7. スタイル>
  9. 頭>
  10. <ボディ>
  11. <キャンバス 幅=
    12. "500"
  12. 身長="500" スタイル="ボーダー: 1px ソリッド #555; 表示: ブロック;マージン: 0 自動;">キャンバス > <スクリプト>
    13. var
  13. arrow=function () {
  14. this.x=0;
    15. this.y
  15. =0; this.color
    16. =
  16. "#f90" this.rolation
    17. =
  17. 0; }    
  18. var canvas=document.querySelector('canvas')
  19. var ctx=canvas.getContext('2d');   
  20. arrow.prototype.draw=関数 (ctx) {
  21. ctx.save();   
  22. ctx.translate(this.x,this.y);   
  23. ctx.rotate(this.rolation)
  24. ctx.fillStyle=this.color;   
  25. ctx.beginPath();   
  26. ctx.moveTo(0, 15);   
  27. ctx.lineTo(-50, 15);   
  28. ctx.lineTo(-50, -15);   
  29. ctx.lineTo(0,-15);   
  30. ctx.lineTo(0,-35);   
  31. ctx.lineTo(50,0);   
  32. ctx.lineTo(0,35);   
  33. ctx.closePath()
  34. ctx.fill();   
  35. ctx.restore();   
  36. }
  37. var Arrow=new arrow();   
  38. Arrow.x=canvas.width/2;   
  39. Arrow.y=canvas.height/2;   
  41. var c_x,c_y; // キャンバス座標の位置;
  42. var isMouseDown=false;   
  43. Arrow.draw(ctx)
  44. canvas.addEventListener('mousedown',function(e) {
  45. isMouseDown=true;   
  46. },false)
  47. canvas.addEventListener('mousemove',function(e) {
  48. if(isMouseDown==true){
  49. c_x=getPos(e).x-canvas.offsetLeft;   
  50. c_y=getPos(e).y-canvas.offsetTop;   
  51. //setInterval(drawFram,1000/60)
  52. requestAnimationFrame(drawFram)
  53. }
  54. },false)
  55. canvas.addEventListener('mouseup',function(e) {
  56. isMouseDown=false;   
  57. },false)
  58. 関数 drawFram(){
  59. var dx=c_x-Arrow.x;   
  60. var dy=c_y-Arrow.y;   
  61. Arrow.rolation=Math.atan2(dy,dx);   
  62. ctx.clearRect(0,0,canvas.width,canvas.height);   
  63. Arrow.draw(ctx)
  64. }
  65. 関数 getPos(e) {
  66. var マウス={x:0,y:0}
  67. var ee=e||event;   
  69. if(e.pageX||e.pageY){
  70. mouse.x=e.pageX;   
  71. mouse.y=e.pageY;   
  72. }else{
  73. mouse.x=e.pageX document.body.scrollLeft document.document.documentElement.scrollLeft;
  74. mouse.y=e.pageY document.body.scrollTop document.document.documentElement.scrollTop;
    76. マウスを返す
    78. スクリプト> ボディ> html> デモのアドレス:
http://codepen.io/jonechen/pen/eZpgWd

ナンセンスではありません。すぐにデモに進みましょう。この効果を達成するのは複雑ではありませんが、スズメと同じくらい小さく、関係する主な知識ポイントは次のとおりです。 1. キャンバスの基本的な描画;

3. キャンバスでの三角関数の基本的な応用;

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

原文:
http://www.cnblogs.com/jone-chen/p/5243439.html

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：X/HTML5 および XHTML2_html5 チュートリアルのヒント次の記事：X/HTML5 および XHTML2_html5 チュートリアルのヒント

関連記事

続きを見る