大家都知道，CSS3中border已经可以实现一定的弧度。因此，就想着可以利用border的特性画一条曲线。
1.首先我们先建一个 div 元素
2.给它一些基本样式
最终效果：
从效果上看，这个方法实现的曲线过渡处不够平滑，仍存在较大缺陷。下面就介绍两个更加常用的方法。
在搜索实现方案的过程中，发现一个好用的 工具 ,可以用它来调试出复杂的曲线。根据设计稿的线条，很快就调试出来一个svg的路径参数。
接着，修饰一下该曲线，就能得到我们所需要的效果了。
最终效果如图：
发现Canvas真的是个好东西，可以用前端实现很多特效。当然画个曲线对于它来说，简直小菜一碟。
这里会用到贝塞尔曲线（bezierCurve)的一些知识。该曲线会利用到四个点作为定位点，分别为头和尾点还有两个控制点用来控制整个曲线的形状和曲率。具体可以参考 维基百科 上的相关介绍。
1.创建一个 canvas 元素
2.利用 bezierCurveTo 这个方法来画该曲线。由于这个方法相关参数难以确定，我同样选择了一个 工具 来获取所需要的具体参数数值。
至此，我们就得到了我们想要的曲线了。
How to Draw Quadratic Curves on an HTML5 Canvas
在线SVG编辑器
MDN SVG Tutorial
<!DOCTYPE html><html>
<head>
<title>Cos演示</title>
<meta charset='utf-8'>
</head>
<body style='text-align:center'>
<canvas width='800' height='600' id='canvas' style='border:1px solid'>
</canvas>
<script>
var canvas=document.getElementById('canvas')
var ctx=canvas.getContext('2d')
function drawAxis(){
ctx.translate(400,300)
//x 轴
ctx.beginPath()
ctx.moveTo(-380,0)
ctx.lineTo(380,0)
ctx.lineTo(372,3)
ctx.lineTo(372,-3)
ctx.lineTo(380,0)
ctx.stroke() //描边
//y 轴
ctx.moveTo(0,200)
ctx.lineTo(0,-200)
ctx.lineTo(3,-192)
ctx.lineTo(-3,-192)
ctx.lineTo(0,-200)
ctx.stroke() //描边
//画坐标
ctx.save()
ctx.strokeStyle='rgba(100,100,255,0.5)'
ctx.moveTo(-Math.PI*100,100)
ctx.lineTo(-Math.PI*100,-100)
ctx.lineTo(Math.PI*100,-100)
ctx.lineTo(Math.PI*100,100)
ctx.lineTo(-Math.PI*100,100)
ctx.stroke() //描边
ctx.fillStyle='rgba(0,0,0,1)'
ctx.fillText("-π",-Math.PI*100,10)
ctx.fillText("π",Math.PI*100,10)
ctx.fillText("-1",5,100)
ctx.fillText("1",5,-100)
ctx.restore()
}
function drawCos(){
var x = -Math.PI*100
ctx.beginPath()
ctx.moveTo(x,100)
for(x = -Math.PI*100x<Math.PI*100x++){
var cx = x/100
var cy = Math.cos(cx)
var y = -cy*100
ctx.lineTo(x,y)
}
ctx.stroke() //描边
}
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height)
ctx.save()
ctx.shadowColor='rgba(0,0,0,0.8)'
ctx.shadowOffsetX=12
ctx.shadowOffsetY=12
ctx.shadowBlur=15
drawAxis()
drawCos()
ctx.restore()
}
ctx.fillStyle='rgba(100,140,230,0.5)'
ctx.strokeStyle='rgba(33,33,33,1)'
draw()
</script>
</body>
</html>
代码附上，妥妥的~
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）