Le canevas HTML5 implémente des flèches qui suivent les compétences du didacticiel rotation

Le canevas HTML5 implémente des flèches qui suivent les compétences du didacticiel rotation_html5 de la souris.

WBOY

Libérer： 2016-05-16 15:51:42

original

2809 Les gens l'ont consulté

Les exemples de cet article sont partagés avec tout le monde

Code XML/HTMLCopier le contenu dans le presse-papiers

>
<html>
<tête>
<méta charset="utf- 8" />
Contenu = " ie = bord " ///> <titre>canvas implémente des flèches qui suivent la rotation de la souris < /
> <style>
style>
tête>
<corps>
<toile largeur=
hauteur="500" style="bordure : 1px solide #555 ; affichage : bloc;marge : 0 auto ;">toile > <script>
flèche=fonction () {
this.x=0;
this.y=0 ;
this.color="#f90"
this.rolation=0;
var canvas=document.querySelector('canvas')
var ctx=canvas.getContext('2d');
arrow.prototype.draw=fonction (ctx) {
ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.rolation)
ctx.fillStyle=ce.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 Flèche=nouveau 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;
},faux)
canvas.addEventListener('mousemove',function(e) {
if(isMouseDown==true){
c_x=getPos(e).x-canvas.offsetLeft;
c_y=getPos(e).y-canvas.offsetTop;
//setInterval(drawFram,1000/60)
requestAnimationFrame(drawFram)
}
},faux)
canvas.addEventListener('mouseup',function(e) {
isMouseDown=false;
},faux)
function 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);
Arrow.draw(ctx)
}
fonction getPos(e) {
var souris={x:0,y:0}
var ee=e||event;
if(e.pageX||e.pageY){
mouse.x=e.pageX;
mouse.y=e.pageY;
}autre{
mouse.x=e.pageX document.body.scrollLeft document.document.documentElement.scrollLeft
mouse.y=e.pageY document.body.scrollTop document.document.documentElement.scrollTop

script

> corps> html> Adresse DEMO :

http://codepen.io/jonechen/pen/eZpgWd

Pas de bêtises, passons directement à la DÉMO. Cet effet n'est pas compliqué à réaliser, mais il est aussi petit qu'un moineau et possède tous les organes internes impliqués. Les principaux points de connaissance impliqués sont : 1. Dessin de base du canevas ;

2. Surveillance de divers événements js ;

3. Animation js

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

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