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>