js有没有办法干div的弧线轨迹移动

JavaScript024

js有没有办法干div的弧线轨迹移动,第1张

这个跟JS关系不是很大，使用CSS来做的；如果你想让DIV跟随滚动条滚动，那么div的样式应该是 relative 或者 absolute 都可以的，看外层的DIV定位如果你想让DIV在屏幕上固定位置，则用 position：fixed 就可以；具体问题还得看你代码才行；

这是以前写的涂鸦板一样的东西,按住鼠标左键拖拽就可以绘制指针的运动轨迹

<body>

<center>

<canvas id="cavsElem" width="800" height="560" style="border: 1px solid black ">你的浏览器不支持此涂鸦板</canvas>

画笔颜色：<input type="color" id="context.color" />

画笔大小:<input type="number"id="context.size" max="10" value="1" />

</center>

<script>

(function(){

var canvas=document.getElementById('cavsElem')//获得画布

var context=canvas.getContext('2d')//准备画笔

var a=document.getElementById('context.color')

var b=document.getElementById('context.size')

    canvas.onmousedown=function(e){     //鼠标触发onmousedown事件时,获取起始坐标

     var x=e.clientX-canvas.getBoundingClientRect().left

     var y=e.clientY-canvas.getBoundingClientRect().top

     context.beginPath()

     context.moveTo(x,y)    

    canvas.onmousemove=function(event){   //触发鼠标移动事件时，获取绘制线条的坐标

     var x=event.clientX-canvas.getBoundingClientRect().left

     var y=event.clientY-canvas.getBoundingClientRect().top

     context.lineTo(x,y)//绘制线条

     context.strokeStyle=a.value

context.lineWidth=b.value

     context.stroke()

    }

    canvas.onmouseup=function(event){    //鼠标被松开时，返回null

     canvas.onmousemove=null

    }

  }

 }())

</script>

</body>