canvas绘制文本 圆弧 填充规则

canvas绘制文本
strokeText()绘制的是空心的文本，fillText设置的是实心的文本

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ctx.font="30px 微软雅黑";
    ctx.strokeStyle="hotpink";
    ctx.strokeText("Hello Javascript!",50,50);

    ctx.fillStyle="red";
    ctx.fillText("Javascript是世界上最好的语言",50,200);

//    ctx.beginPath();
    ctx.strokeStyle="blue";
    ctx.strokeText("Hello Javascript!",50,300);
</script>

绘制文字的对其方式：
textAlign：start（左对齐） end（右对齐） center（居中对齐）
示例demo：

<script>
    //textAlign：设置文本的水平对齐方式i
    //默认值：start--->left左对齐
   
//      end--->right右对齐
   
//      center：居中对齐

   
var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ctx.moveTo(300,0);
    ctx.lineTo(300,600);
    ctx.stroke();

    ctx.textAlign="center";
    ctx.font="30px 微软雅黑";
    ctx.strokeStyle="hotpink";
    ctx.strokeText("Hello Javascript!",300,50);
</script>

measureText（）方法获取绘制的文本的宽度；
示例demo：

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    //在计算文本宽度的时候，会自动判定当前状态下设置的字体大小
   
var obj=ctx.measureText("Hello Javascript!");
    console.log(obj.width);//获取文本的宽度
</script>

绘制文本的垂直对其方式：
textBaseline属性，取值为top hanging middle baseline bottom，默认为基线对其

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    //绘制水平的参考线：
   
ctx.moveTo(0,50);
    ctx.lineTo(800,50);
    ctx.stroke();

    ctx.textBaseline="middle";
    ctx.font="30px 微软雅黑";
    ctx.strokeStyle="hotpink";
    ctx.strokeText("Hello Javascript!",300,50);

//    ctx.strokeText("我是中国人，我爱我的祖国",300,50);
</script>

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    //绘制水平的参考线：
   
ctx.moveTo(0,50);
    ctx.lineTo(800,50);
    ctx.stroke();

    ctx.textBaseline="hanging";
    ctx.font="30px 微软雅黑";
    ctx.strokeStyle="hotpink";
//    ctx.strokeText("Hello Javascript!",300,50);

    ctx.strokeText("我是中国人，我爱我的祖国",300,50);
</script>

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    //绘制水平的参考线：
   
ctx.moveTo(0,50);
    ctx.lineTo(800,50);
    ctx.stroke();

    ctx.textBaseline="bottom";
//    ctx.textBaseline="top";
    ctx.font="30px 微软雅黑";
    ctx.strokeStyle="hotpink";
//    ctx.strokeText("Hello Javascript!",300,50);

    ctx.strokeText("我是中国人，我爱我的祖国",300,50);
</script>

绘制圆弧
1. arc(圆心x，圆心y，半径，开始弧度，结束弧度,是否以逆时针方式绘制)
2. 整个圆是2*Math.PI的，0的位置位于圆心水平往右拉直线，Math.PI/2就位于圆心的正下方
3. 默认的绘制方式是：顺时针，可以通过arc方法的底6个参数传递值为true表示逆时针方式绘制

利用arc方法绘制圆弧，接收六个参数
示例demo：

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.arc(300,300,150,-0.7*Math.PI,0.5*Math.PI);
    ctx.stroke();
</script>

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    //弧度的值：圆弧上的点
   
//规定：从圆心往右接触到的这个点对应的弧度值为：0
    //从弧度为0的位置开始顺时针旋转，弧度的值越来越大
   
//      转60度：-->PI/3
    //        90度：-->PI/2
    //       180度：-->PI
    //       270度：1.5PI
    //      360度：2PI

    //从弧度为0的位置开始逆时针旋转，弧度的值越来越小

   
//弧度差：形成的夹角对应的弧度
</script>
绘制圆弧的demo：

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ctx.arc(300,300,150,0.7*Math.PI,1.3*Math.PI);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(400,300,150,1.3*Math.PI,0.7*Math.PI,true);
    ctx.stroke();
</script>

绘制实心的圆弧：

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.moveTo(300,300);
    ctx.arc(300,300,150,0,Math.PI/3);
    ctx.fill();
</script>

圆动画：demo

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var endRadian=-0.4*Math.PI;
    var timer=setInterval(function(){
        ctx.clearRect(0,0,canvas.width,canvas.height);

        ctx.beginPath();
        ctx.moveTo(300,300);
        ctx.arc(300,300,150,-0.5*Math.PI,endRadian);

        ctx.fill();

        //清除定时器：
       
if(endRadian>=1.5*Math.PI){
           
clearInterval(timer);
        }
        console.log("stop");
        endRadian+=0.01*Math.PI;
    },20)
</script>