<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#text{
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
position: absolute;
background: gray;
}
</style>
<body>
<canvas id="text" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
window.onload=function () {
var canvas=document.getElementById("text");
if (canvas.getContext){
var ctx=canvas.getContext("2d");
//画圆
ctx.beginPath();
ctx.save();
ctx.strokeStyle="pick"
ctx.moveTo(100,100)
ctx.arc(100,100,50,0,270*Math.PI/180),
ctx.stroke();
ctx.restore()
//二次贝塞尔函数
ctx.beginPath()
ctx.save()
ctx.strokeStyle="blue"
ctx.moveTo(100,100)
ctx.quadraticCurveTo(300,0,200,200),
ctx.stroke()
ctx.restore()
//三次贝塞尔函数
ctx.beginPath()
ctx.save()
ctx.strokeStyle="red"
ctx.moveTo(50,50)
ctx.bezierCurveTo(300,0,200,200,300,100),
ctx.stroke()
ctx.restore()
}
}
</script>
</html>
