canvas贝塞尔曲线爱心_canvas--贝塞尔曲线

---动画实现贝塞尔曲线---

Document

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;

}

}

------二次贝塞曲线　------

Document

canvas{

border: 1px dashed gray;

}

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()

}

}

----三次贝塞尔曲线---

Document

canvas{

border: 1px dashed gray;

}

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();

}

}