跪求，html,css,js前端怎么实现某个点按照轨迹来画图案。

JavaScript011

跪求，html,css,js前端怎么实现某个点按照轨迹来画图案。,第1张

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

<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>

cxt.scale(2,2) 缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置x： 添加到水平坐标（x）上的值 y： 添加到垂直坐标（y）上的值 发生位移后，相当于把画布的0,0坐标 更换到新的x,y的位置，所有绘制的新元素都被影响。 位移画布一般配合缩放和旋转等。context.rotate(angle) 方法旋转当前的绘图 注意参数是弧度（PI） 如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。