html5 canvas之绘制曲线

html5 canvas 提供了绘制一系列曲线的函数。如下:

1、如果我们需绘制更加复杂的曲线路径,我们或许该用到贝塞尔或者2次方程曲线。

quadraticCurveTo(cp1x, cp1y, x, y) 
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

 两种曲线有何区别?我们可以参看一下右边这张图,2种曲线都有一个起点和终点(blue point),但是贝塞尔曲线仅有一个“control point”(red point),2次曲线则有2个。

两个方法中的x和y参数都为曲线的终点坐标,cp1x和cp1y为第一control point的坐标,cp2x和cp2y为2次曲线的第二控制点。

熟 练运用2次曲线和贝塞尔曲线进行路径绘制,是一件蛮有挑战性的工作,因为它不像某些矢量绘图软件,比如ADOBE Illustrator等具有直观的视觉反馈,所以这使得我们在绘制一些复杂的曲线时会遇到一点小困难,不过如果你有耐心和时间的话,你肯定能绘制出许多 复杂的曲线来。

二次曲线示例:

// Quadratric curves example
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();

 

贝塞尔曲线示例:

// Bezier curves example
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();

 


2、如果要创建一个弧形的画布,我们可以使用 arc() 方法。

语法:arc(定义一个中心点,半径,起始角度,结束角度,和绘图方向:顺时针或逆时针)
代码:

  1. context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);

HTML5 Canvas Arc 例子:

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>html5 canvas Arc</title>
    <style>
    body {margin: 0px;padding: 0px;}
    #myCanvas {border: 1px solid #9C9898; margin:0 auto;margin-top:200px; margin-left:100px;}
    </style>
    <script>
    window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var centerX = 288;
    var centerY = 160;
    var radius = 75;
    var startingAngle = 1.1 * Math.PI;
    var endingAngle = 1.9 * Math.PI;
    var counterclockwise = false;
    context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
    context.lineWidth = 15;
    context.strokeStyle = "black"; // line color
    context.stroke();
    };
    </script>
    </head>
    <body>
    <canvasid="myCanvas"width="578"height="200">
    </canvas>
    </body>
    </html>

 


HTML5 Canvas Arc 说明:


看看上图中的外观 。弧没有超过部分的一个假想的圆的周长 。这个虚构的循环可以被定义centerX,centerY,和半径。
接下来,我们可以定义沿所定义的虚圆的周长有两个点的弧本身startingAngle和endingAngle。这两个角度定义的弧度和形式来自圆心和虚线相交的弧线,我们希望创建两端。
弧方法的最后一个参数是逆时针,这是一个可选的参数,它定义的两个结束点之间的 ARC路径的方向。除非另有规定,这种说法是默认为false,这将导致顺时针要绘制弧。


posted @ 2012-05-19 13:21  pansly  阅读(8534)  评论(1编辑  收藏  举报