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

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

WBOY

Freigeben： 2016-05-16 15:51:42

Original

2781 Leute haben es durchsucht

Die Beispiele in diesem Artikel werden mit allen geteilt

XML/HTML-CodeInhalt in die Zwischenablage kopieren

>
<html>
<Kopf>
<meta charset="utf- 8" />
<title>canvas implementiert Pfeile, die der Mausdrehung folgen < ; /Titel> <
> *{padding: 0;margin: 0} Stil>
Kopf>
<Körper>
<Leinwand Breite=
Höhe="500"
="border: 1px solid #555; display: block;margin: 0 auto;">canvas > <Skript> var Pfeil=Funktion () {
this.x=0;
this.y=0;
="#f90"
=0; }
var canvas=document.querySelector('canvas')
var ctx=canvas.getContext('2d');
arrow.prototype.draw=function (ctx) {
ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.rulation)
ctx.fillStyle=this.color;
ctx.beginPath();
ctx.moveTo(0, 15);
ctx.lineTo(-50, 15);
ctx.lineTo(-50, -15);
ctx.lineTo(0,-15);
ctx.lineTo(0,-35);
ctx.lineTo(50,0);
ctx.lineTo(0,35);
ctx.closePath()
ctx.fill();
ctx.restore();
}
var Pfeil=neu arrow();
Arrow.x=canvas.width/2;
Arrow.y=canvas.height/2;
var c_x,c_y; //相对于canvas坐标的位置；
var isMouseDown=false;
Arrow.draw(ctx)
canvas.addEventListener('mousedown',function(e) {
isMouseDown=true;
},falsch)
canvas.addEventListener('mousemove',function(e) {
if(isMouseDown==true){
//setInterval(drawFram,1000/60)
requestAnimationFrame(drawFram) } },false)
canvas.addEventListener('mouseup',function(e) {
=
;
},false)
function drawFram(){ var dx=
-Arrow.x;
var
=c_y-Arrow.y;
=Math.atan2(dy,dx); ctx.clearRect(0,0,canvas.width,canvas.height);
Arrow.draw(ctx) } function getPos(e) {
var
={x:0,y:0}
var
e
mouse.x=e.pageX;
=e.pageY;
}sonst{
mouse.x=e.pageX document.body.scrollLeft document.document.documentElement.scrollLeft;
mouse.y=e.pageY document.body.scrollTop document.document.documentElement.scrollTop;
zurück mit der Maus;
>
>
> 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