先上效果图
不知道为什么喜欢用元芳2个字！如果都要世界都要元芳来看，感觉元芳要忙不过来！
cav1.gif
在上demo下载地址
https://github.com/976500133/CanvasCurve
分析
1.需要canvas 事件支持
canvas 支持
onmouseenter
onmousedown
onmousemove
onmouseup
onmouseout
事件等
2.最终这个效果是每次30/1000 s 清空画布重置的效果。
上代码，程序员就是这么干脆，说多了没意思
HTML 代码
html>
JS 代码
// xxxxx.style.cursor?=?"url(005.jpg),auto";var canvas, ctx;var defaultCircles = [
{x : 112 , y : 65 } ,
{x : 336 , y : 65 } ,
{x : 560 , y : 65 } ,
{x : 784 , y : 65 } ,
{x : 1008 , y : 65 }
]; var circles = [];//所有的圆
var selectedCircle;//选中的圆
var hoveredCircle;//
var Timer = null; //圆对象function Circle(x, y, radius){ this.x = x; this.y = y; this.radius = radius;
}//清除canvasfunction clear() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}//画圆function drawCircle(ctx, x, y, radius , fillStyle = 'rgba(198, 199, 199, 1.00)') {
ctx.fillStyle = fillStyle
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}//传说中的吸附效果function renderCircle(circles){ return circles.map(function(item , index){ return new Circle(item.x = 1110 ? 1110 : item.x) , item.y >=115 ? 115 : (item.y 如此。代码就写完了。
作者：二月长河
链接：https://www.jianshu.com/p/59735c905eef
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/4357/viewspace-2811824/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
写作需要学习
下一篇：
jquery获取checked元素
请登录后发表评论
登录
全部评论
