suchen

Heim  >  Artikel  >  Web-Frontend  >  HTML5-Canvas implementiert Pfeile, die den Tutorialfähigkeiten der Mausrotation_html5 folgen

HTML5-Canvas implementiert Pfeile, die den Tutorialfähigkeiten der Mausrotation_html5 folgen

WBOY
WBOYOriginal
2016-05-16 15:51:422780Durchsuche

Die Beispiele in diesem Artikel werden mit allen geteilt

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >
  2. <html>
  3. <Kopf>
  4. <meta charset="utf- 8" />
    5. „ /// >
  5. <title>canvas implementiert Pfeile, die der Mausdrehung folgen < ; /Titel>  <
    6. Stil
  6. > *{padding: 0;margin: 0}  Stil>
    7.  
  7. Kopf>
  9. <Körper>
  10. <Leinwand Breite=
    11. "500"
  11. Höhe="500"
    12. Stil
  12. ="border: 1px solid #555; display: block;margin: 0 auto;">canvas >  <Skript> var Pfeil=Funktion () {
    13.  
  13. this.x=0; 
  14. this.y=0;  
    15. diese.farbe
  15. ="#f90"  
    16. this.ration
  16. =0;  }    
  17.         var canvas=document.querySelector('canvas')   
  18.         var ctx=canvas.getContext('2d');   
  19.         arrow.prototype.draw=function (ctx) {   
  20.             ctx.save();   
  21.             ctx.translate(this.x,this.y);   
  22.             ctx.rotate(this.rulation)   
  23.             ctx.fillStyle=this.color;   
  24.             ctx.beginPath();   
  25.             ctx.moveTo(0, 15);   
  26.             ctx.lineTo(-50, 15);   
  27.             ctx.lineTo(-50, -15);   
  28.             ctx.lineTo(0,-15);   
  29.             ctx.lineTo(0,-35);   
  30.             ctx.lineTo(50,0);   
  31.             ctx.lineTo(0,35);   
  32.             ctx.closePath()   
  33.             ctx.fill();   
  34.             ctx.restore();   
  35.         }   
  36.         var Pfeil=neu arrow();   
  37.         Arrow.x=canvas.width/2;   
  38.         Arrow.y=canvas.height/2;   
  39.            
  40.         var c_x,c_y; //相对于canvas坐标的位置；   
  41.         var isMouseDown=false;   
  42.         Arrow.draw(ctx)   
  43.         canvas.addEventListener('mousedown',function(e) {   
  44.             isMouseDown=true;   
  45.         },falsch)   
  46.         canvas.addEventListener('mousemove',function(e) {   
  47.             if(isMouseDown==true){   
  48.                                                         //setInterval(drawFram,1000/60)   
  49.                 requestAnimationFrame(drawFram)                }            },false)   
  50.         canvas.addEventListener('mouseup',function(e) {   
  51.             
    52. isMouseDown
  52. =
    53. false
  53. ;   
  54.         },false)   
  55.         function drawFram(){                var dx=
    56. c_x
  56. -Arrow.x;   
  57.             var 
    58. dy
  58. =c_y-Arrow.y;                
    59. Arrow.rolation
  59. =Math.atan2(dy,dx);                ctx.clearRect(0,0,canvas.width,canvas.height);   
  60.             Arrow.draw(ctx)            }            function getPos(e) {   
  61.             var 
    62. Maus
  62. ={x:0,y:0}   
  63.             var 
    64. e
  64. e
    65. =e||event;   
  65.         
    66.             if(e.pageX||e.pageY){   
  66.                 mouse.x=e.pageX;   
  67.                 
    68. mouse.y
  68. =e.pageY;   
  69.             }sonst{
  70. mouse.x=e.pageX document.body.scrollLeft document.document.documentElement.scrollLeft;
  71. mouse.y=e.pageY document.body.scrollTop document.document.documentElement.scrollTop;
    72.                                                           
  72. zurück mit der Maus;
  73.                                                              
    74.  
    75. Skript
  75. > 
    76. Körper
  76. >
    77. html
  77. > DEMO-Adresse: http://codepen.io/jonechen/pen/eZpgWd
Kein Unsinn, gehen wir direkt zur DEMO. Dieser Effekt ist nicht kompliziert, aber er ist so klein wie ein Spatz und verfügt über alle darin enthaltenen inneren Organe:

1. Grundlegendes Zeichnen von JS-Ereignissen 4 Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Originaltext:

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


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：X/HTML5- und XHTML2_html5-Tutorial-TippsNächster Artikel：X/HTML5- und XHTML2_html5-Tutorial-Tipps

In Verbindung stehende Artikel

Mehr sehen