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

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

WBOY

リリース： 2016-05-16 15:51:42

オリジナル

2807 人が閲覧しました

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

XML/HTML コードコンテンツをクリップボードにコピー

>
<html>
<頭>
<メタ charset="utf- 8" />
コンテンツ = " ie =edge " /// > <title>キャンバスはマウスの回転に従う矢印を実装します < ; /
> <スタイル>
スタイル>
頭>
<ボディ>
<キャンバス幅=
身長="500" スタイル="ボーダー: 1px ソリッド #555; 表示: ブロック;マージン: 0 自動;">キャンバス > <スクリプト>
arrow=function () {
this.x=0;
=0; this.color
"#f90" this.rolation
0; }
var canvas=document.querySelector('canvas')
var ctx=canvas.getContext('2d');
arrow.prototype.draw=関数 (ctx) {
ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.rolation)
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 Arrow=new arrow();
Arrow.x=canvas.width/2;
Arrow.y=canvas.height/2;
var c_x,c_y; // キャンバス座標の位置;
var isMouseDown=false;
Arrow.draw(ctx)
canvas.addEventListener('mousedown',function(e) {
isMouseDown=true;
},false)
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)
}
},false)
canvas.addEventListener('mouseup',function(e) {
isMouseDown=false;
},false)
関数 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)
}
関数 getPos(e) {
var マウス={x:0,y:0}
var ee=e||event;
if(e.pageX||e.pageY){
mouse.x=e.pageX;
mouse.y=e.pageY;
}else{
mouse.x=e.pageX document.body.scrollLeft document.document.documentElement.scrollLeft;
mouse.y=e.pageY document.body.scrollTop document.document.documentElement.scrollTop;