大家都知道，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
在右边在绘制一条直线角度和右边的棱大约25°，要稍微短一些，然后连接；在右边在绘制一条直线角度和右边的棱大约35°；
例子如下：
<!DOCTYPE HTML>
<html>
<title>canvas test</title>
<head>
<style>
#canvas{
width:800px
height:800px
box-shadow: 0px 0px 10px rgba(0, 0, 0, .8)
margin: 10px 10px
}
</style>
</head>
<body>
<canvas id='canvas' width=800 height=800>unsupport</canvas>
</body>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
ctx.strokeColor = 'black'
ctx.lineWidth = 3
ctx.shadowOffsetX = 10
ctx.shadowOffsetY = 5
ctx.shadowBlur = 2
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'
ctx.save()
ctx.translate(100, 100)
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(400, 0)
ctx.moveTo(0, 0)
for(var i = 0i <20i += 0.1){
var x = i * 20
var y = Math.sin(i) * 20
ctx.lineTo(x, y)
}
ctx.stroke()
ctx.restore()
ctx.save()
ctx.translate(100, 200)
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(400, 0)
ctx.moveTo(0, 0)
ctx.quadraticCurveTo(150, -100, 200, 0)
ctx.quadraticCurveTo(250, 200, 400, 0)
ctx.stroke()
ctx.restore()
ctx.save()
ctx.translate(100, 400)
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(400, 0)
ctx.moveTo(0, 0)
ctx.bezierCurveTo(50, 0, 100, -50, 150, -100)
ctx.bezierCurveTo(175, -75, 150, -25, 100, 0)
ctx.bezierCurveTo(300, -75, 600, -100, 400, 0)
ctx.stroke()
ctx.restore()
ctx.save()
ctx.translate(100, 600)
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(400, 0)
ctx.moveTo(0, -124)
for(var i = 0i <25i += 0.1){
var x = i * 10
var y = -(((i - 12) * (i - 12)) - 20)
ctx.lineTo(x, y)
}
ctx.stroke()
ctx.restore()
ctx.save()
ctx.beginPath()
ctx.moveTo(100, 0)
ctx.lineTo(100, 800)
ctx.stroke()
ctx.restore()
}
</script>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）