HTML5 Canvas学习笔记之详解弧线的绘制

Canvas翻译过来呢就是画布
所以Canvas的作用就是把网页当成一张画布，在其中画画——说实话H5中最令我感兴趣的就是Canvas了。

在html中引入canvas

<canvas id="canvas" style="height:100%">
    当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>

绘制一条线、矩形与圆弧

这里先说Canvas的几个属性：

• 绘制一条线
• 绘制矩形
• 绘制圆

window.onload=function(){
    var canvas=document.getElementById('canvas');
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getContext('2d');
    context.beginPath();
    context.moveTo(100,100);//从（100，100）点到（700，700）划一根直线
    context.lineTo(700,700);
    context.lineWidth=5; //指定样式，直线宽度为5，直线的颜色为红色
    context.strokeStyle="red";
    context.stroke();
    context.closePath();//必须closepath，不然下面会从这儿开始
   //绘制矩形
    context.beginPath();
    context.moveTo(100,100);
    context.lineTo(700,700);
    context.lineTo(100,700);
    context.lineTo(100,100);
    context.lineWidth=5;
    context.strokeStyle="blue";
    context.stroke();
    context.fillStyle="grey";//设置填充样式
    context.fill();
    context.closePath();
     //绘制圆弧
    context.beginPath();
    context.arc(300, 300, 200, 0, 1.5*Math.PI, false);
    //acr()的参数为（X,Y,R,）
    context.lineWidth=5;
    context.strokeStyle="#005";
    context.stroke();
    context.closePath();
}

效果图：

弧线的绘制

• arc()
• arcTo()

acr() ,圆弧和圆角矩形

context.arc(centerX,centerY,radius,startingAngle,endingAngle,anticlockwise=false)
弧度永远是从顺时针开始0，0.5pi ,1.0pi, 1.5pi, 2pi，不管anticlockwise等于多少，这些值永远不变。

window.onload=function(){
    var canvas=document.getElementById('canvas');
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getContext('2d');

    context.beginPath();
    context.arc(300, 300,100, 0, 1.5*Math.PI, false);
    context.lineWidth=5;
    context.strokeStyle="#005";
    context.stroke();
    context.closePath();

    context.beginPath();
    context.arc(600, 300, 100, 0, 1.5*Math.PI, true);//逆时针
    context.lineWidth=5;
    context.strokeStyle="#005";
    context.stroke();
    context.closePath();
}

运行截图

由此可见，1.5pi永远是上方的点

利用圆弧绘制圆角矩形

function drawRoundRect(cxt,x,y,width,height,radius){
  cxt.save()
  cxt.translate(x,y)
  pathRoundRect(cxt,width,height,radius)
  cxt.stroke()
  cxt.restore()
}
function pathRoundRect(cxt,width,height,radius){
  cxt.beginPath()
  cxt.arc(width-radius,height-radius,radius,0,Math.PI/2)
  cxt.lineTo(radius,height)
  cxt.arc(radius,height-radius,radius,Math.PI/2,Math.PI)
  cxt.lineTo(0,radius)
  cxt.arc(radius,radius,radius,Math.PI,Math.PI*3/2)
  cxt.lineTo(width-radius,0)
  cxt.arc(width-radius,radius,radius,Math.PI*3/2,Math.PI*2)
  cxt.closePath()
}

arcTo()

context.arcTo(x1,y1,x2,y2,radius)
利用控制点(x1,y1)，(x2,y2)。起始点不一定是(x0,y0)，终点也不一定是(x2,y2)

window.onload=function(){
    var canvas=document.getElementById('canvas');
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getContext('2d');
    context.beginPath()
    context.moveTo(150,150)
    context.arcTo(600,150,650,650,300)
    context.lineWidth=5
    context.strokeStyle='red'
    context.stroke()

    context.beginPath()
    context.moveTo(150,150)
    context.lineTo(650,150)
    context.lineTo(650,650)
    context.lineWidth=5
    context.strokeStyle='gray'
    context.stroke()

}

可以尝试改变radius的值
radius=600

贝塞尔Bezier二次曲线

context.moveTo(x0,y0)
context.quadraticCurveTo(x1,y1,x2,y2)
指定起始点(x0,y0)，终止点(x2,y2)，控制点(x1,y1)
贝塞尔曲线和arcTo的含义其实类似，但是这里的起始点和终止点就是真正的起始点和终止点，所以画出的并不是真正的圆弧，而是曲线。
可以上http://tinyurl.com/html5quadratic
上查看，这里形象的展示了quadratic的用法

贝塞尔三次曲线

拥有两个控制点，可以绘制花瓣、波浪效果等
context.moveTo(x0,y0)
context.bezierCurveTo(x1,y1,x2,y2,x3,y3)
可以上查看演示
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html

该文章是学习了慕课网上Canvas绘图详解而总结的学习笔记
http://www.imooc.com/learn/185
感谢老师！

我的代码在https://github.com/daisyHawen/html5-canvas-stars.git
在其中展示了如何使用这些canvas基本属性，同时展示了一个实现绘制一片星空效果：