您的位置：首页 > Web前端 > HTML5

HTML5中canvas的二次曲线用法

2015-11-20 11:35 477 查看

<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function draw2D(){
var canvas=document.getElementById("canvas-fram");
if(canvas==undefined){
return ;
}
canvas.width=1000;  //设置画布的宽
canvas.height=1000; //设置画布的高
var context=canvas.getContext("2d");
context.moveTo(50, 50);
context.bezierCurveTo(50, 50,200,200,300,50);//绘制曲线，它是由三个坐标点组成，各个坐标点之间会绘制一个弧度
/*
bezierCurveTo(p1x,p1y,p2x,p2y,x,y)
p1x:第一个控制点x坐标
p1y:第一个控制点y坐标
p2x:第二个控制点x坐标
p2y:第二个控制点y坐标
x:终点x坐标
y:终点y坐标
*/
context.stroke();
context.quadraticCurveTo(300, 0, 400,0);//绘制二次曲线，它是由两个坐标点组成的曲线
/*
qpx1:二次曲线控制点x坐标
qpy1:二次样条曲线控制点y坐标
x:二次样条曲线终点x坐标
y:二次样条曲线终点y坐标
*/
context.stroke();
}
</script>
</head>
<body onload="draw2D()">
<canvas id="canvas-fram"></canvas>
</body>
</html>

效果图如下所示：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航