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,