您现在的位置是：网站首页> 编程资料编程资料

html5 canvas实现跟随鼠标旋转的箭头_html5_网页制作_

2023-11-11 327人已围观

简介 这篇文章主要为大家详细介绍了html5 canvas实现跟随鼠标旋转的箭头，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html>  
  3.  <head>    
  4.   <meta charset="utf-8" />    
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />    
  6.   <title>canvas实现跟随鼠标旋转的箭头title>    
  7.   <style>  
  8.     *{padding: 0;margin: 0}   
  9.     style>    
  10.  head>    
  11.  <body>    
  12.   <canvas width="500" height="500" style="border: 1px solid #555; display: block;margin: 0 auto;">canvas>    
  13.   <script>  
  14.         var arrow=function () {   
  15.             this.x=0;    
  16.             this.y=0;   
  17.             this.color="#f90"  
  18.             this.rolation=0;   
  19.         }    
  20.         var canvas=document.querySelector('canvas')   
  21.         var ctx=canvas.getContext('2d');   
  22.         arrow.prototype.draw=function (ctx) {   
  23.             ctx.save();   
  24.             ctx.translate(this.x,this.y);   
  25.             ctx.rotate(this.rolation)   
  26.             ctx.fillStyle=this.color;   
  27.             ctx.beginPath();   
  28.             ctx.moveTo(0, 15);   
  29.             ctx.lineTo(-50, 15);   
  30.             ctx.lineTo(-50, -15);   
  31.             ctx.lineTo(0,-15);   
  32.             ctx.lineTo(0,-35);   
  33.             ctx.lineTo(50,0);   
  34.             ctx.lineTo(0,35);   
  35.             ctx.closePath()   
  36.             ctx.fill();   
  37.             ctx.restore();   
  38.         }   
  39.         var Arrow=new arrow();   
  40.         Arrow.x=canvas.width/2;   
  41.         Arrow.y=canvas.height/2;   
  42.            
  43.         var c_x,c_y; //相对于canvas坐标的位置；   
  44.         var isMouseDown=false;   
  45.         Arrow.draw(ctx)   
  46.         canvas.addEventListener('mousedown',function(e) {   
  47.             isMouseDown=true;   
  48.         },false)   
  49.         canvas.addEventListener('mousemove',function(e) {   
  50.             if(isMouseDown==true){   
  51.                 c_x=getPos(e).x-canvas.offsetLeft;   
  52.                 c_y=getPos(e).y-canvas.offsetTop;   
  53.                 //setInterval(drawFram,1000/60)   
  54.                 req

    上一篇：Html5 postMessage实现跨域消息传递_html5_网页制作_

    下一篇：HTML5如何实现元素拖拽_html5_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网