本文主要包含html5,canvas,箭头旋转,鼠标跟随等相关知识,Jone_chen 希望在学习及工作中可以帮助到您
本文实例为大家分享了
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <title>canvas实现跟随鼠标旋转的箭头</title>
- <style>
- *{padding: 0;margin: 0}
- </style>
- </head>
- <body>
- <canvas width="500" height="500" style="border: 1px solid #555; display: block;margin: 0 auto;"></canvas>
- <script>
- 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);
- ctx.lineTo(50,0);
- ctx.lineTo(0,35);
- ctx.closePath()
- ctx.fill();
- ctx.restore();
- }
- var Arrow=new arrow();
-