html5鼠标点击旋转,html5 canvas实现跟随鼠标旋转的箭头

本文实例为大家分享了

XML/HTML Code复制内容到剪贴板

html>

canvas实现跟随鼠标旋转的箭头

*{padding: 0;margin: 0}

var arrow=function () {

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=function (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);