地址： http://hi.baidu.com/hjzheng/blog/item/ed982a7d66fcc82d0dd7da45.html
曲线
曲线函数 arc(x, y, radius, startAngle, endAngle, anticlockwise)
参数 x,y 圆心坐标 r 为半径 startAngle 起始角度 endAngle 结束角度 anticlockwise 顺时针还是逆时针
实例
CODE
<!DOCTYPE HTML>
<html>
<head>
<title>Html5 Canvas arc</title>
</head>
<body>
<canvas id="c" height="1000" width="700"></canvas>
<script type="text/javascript">
var c = document.getElementById('c');//取得Dom元素
var context = c.getContext("2d");//拿到Canvas的上下文 目前好像只支持2D渲染
context.strokeStyle = "#000000";//填充颜色
//曲线
context.beginPath();
context.arc(200,200,40,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.beginPath();
context.arc(200,300,40,0,Math.PI,true);
context.closePath();
context.stroke();
context.beginPath();
context.arc(200,400,40,Math.PI/2,Math.PI,false);
context.closePath();
context.stroke();
context.beginPath();
context.arc(200,500,40,Math.PI/2,Math.PI,true);
context.closePath();
context.stroke();
</script>
</body>
</html>
贝塞尔曲线 二次和三次
什么是贝塞尔曲线 ？
quadraticCurveTo(cp1x, cp1y, x, y) 参考点(cp1x,cp2y) 结束点(x,y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 两个参考点 和 结束点
详细讲解 见 mozilla.org
1099
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
