html5 canvas melaksanakan anak panah yang mengikuti kemahiran tutorial rotation

html5 canvas melaksanakan anak panah yang mengikuti kemahiran tutorial rotation_html5 tetikus

WBOY

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

asal

2799 orang telah melayarinya

Contoh dalam artikel ini dikongsi dengan semua orang

Kod XML/HTMLSalin kandungan ke papan keratan

>
<html>
<kepala>
<meta charset="utf- 8" />
Kandungan = " iaitu = tepi " /// > <tajuk>kanvas melaksanakan anak panah yang mengikuti putaran tetikus < ; /
> <gaya>
gaya>
kepala>
<badan>
<kanvas lebar=
tinggi="500" gaya="sempadan: 1px pepejal #555; paparan: blok; margin: 0 auto;">kanvas > <skrip>
anak panah=fungsi () {
ini.x=0;
ini.y=0;
="#f90"
=0; }
var kanvas=dokumen.querySelector('kanvas') >
var ctx=kanvas.getContext('2d');
arrow.prototype.draw=fungsi (ctx) {
ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.rolation)
ctx.fillStyle=ini.warna;
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 Anak panah=baharu anak panah();
Anak panah.x=kanvas.lebar/2;
Arrow.y=kanvas.height/2;
var c_x,c_y; //相对于canvas坐标的位置；
var isMouseDown=palsu;
Arrow.draw(ctx)
canvas.addEventListener('mousedown', function(e) {
isMouseDown=benar;
},salah)
canvas.addEventListener('mousemove', function(e) {
jika(isMouseDown==benar){
c_x=getPos(e).x-canvas.offsetLeft;
c_y=getPos(e).y-canvas.offsetTop;
//setInterval(drawFram,1000/60)
permintaanAnimationFrame(drawFram)
}
}, salah)
canvas.addEventListener('mouseup', function(e) {
isMouseDown=palsu;
}, salah)
fungsi drawFram(){
var dx=c_x-Arrow.x;
var dy=c_y-Arrow.y;
Arrow.rolation=Math.atan2(dy,dx);
ctx.clearRect(0,0,canvas.width,canvas.height);
Anak panah.draw(ctx)
}
fungsi getPos(e) {
var tetikus={x:0,y:0}
var ee=e||acara;
jika(e.pageX||e.pageY){
tetikus.x=e.pageX;
mouse.y=e.pageY;
}lain{
tetikus.x=e.pageX document.body.scrollLeft document.document.documentElement.scrollLeft;
mouse.y=e.pageY document.body.scrollTop document.document.documentElement.scrollTop;