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

满意答案

weunqxm651

2018.05.14

采纳率：46%    等级：10

已帮助：417人

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

你的浏览器不支持此涂鸦板

画笔颜色：

画笔大小:

(function(){

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

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

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

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

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

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

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

context.beginPath();

context.moveTo(x,y);

canvas.οnmοusemοve=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.οnmοuseup=function(event){    //鼠标被松开时，返回null

canvas.οnmοusemοve=null;

};

};

}());

10分享举报