canvas--贝塞尔曲线
---动画实现贝塞尔曲线---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 50px;
height: 50px;
background: purple;
position: absolute;
top: 0px;
left: 0px;
animation-name: sport;
animation-duration: 5s;
animation-timing-function: cubic-bezier(.17,.67,1,-0.04) /* 三次贝塞尔曲线 */
}
@keyframes sport{
from{
top: 0px;
left: 0px;
}
to{
top: 600px;
left: 600px;
}
}
</style>
<body>
<!-- 7day -->
<!-- 实例网址https://cubic-bezier.com/ -->
<div></div>
</body>
</html>
------二次贝塞曲线 ------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas{
border: 1px dashed gray;
}
</style>
<script type="text/javascript">
window.onload = function() {
// 绘制二次贝塞尔曲线
// 格式：ctx.quadraticCurveTo(cx,cy,x2,y2);
// 得到canvas对象
var oCanvas = document.getElementById("canvas");
if(oCanvas.getContext){
// 得到2d上下文
var oContext = oCanvas.getContext("2d")
// 绘制
// 开始点
oContext.moveTo(150,150);
oContext.quadraticCurveTo(300,150,400,400);
oContext.strokeStyle = 'green';
// 描边路径
oContext.stroke()
}
}
</script>
</head>
<body>
<!-- 实例网址 -->
<!-- http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html -->
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>
----三次贝塞尔曲线---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas{
border: 1px dashed gray;
}
</style>
<script>
window.onload = function(){
// 绘制三次贝塞尔曲线
// 格式：ctx.bezierCurveTo(ct1,cy1,cx2,cy2,x,y);
var oCanvas = document.getElementById("canvas");
if(oCanvas.getContext){
var oContext = oCanvas.getContext("2d");
// 开始绘制路径
oContext.beginPath();
// 起始点
oContext.moveTo(200,200);
// 绘制三次贝塞尔曲线
oContext.bezierCurveTo(300,200,350,250,500,500);
// 描边路径
oContext.stroke();
}
}
</script>
</head>
<body>
<!-- 有两个控制点 -->
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>
