); if(drawing.getContext) { context = drawing.getContext(); context.strokeStyle = ; context.beginPath();//开始绘制新路径 //绘制外圆 context.arc(100, 100, 99, 0, 2*Math.PI, false);//参数依次为圆心坐标x、y、半径、起始角度(用弧度表示)、结束角度、起始角度是否按逆时针方向计算（flase为顺时针） context.moveTo(194, 100);//将绘图游标移动到（x,y）,不画线 //绘制内圆 context.arc(100, 100, 94, 0, 2*Math.PI, false); //绘制分针 context.moveTo(100, 100); context.lineTo(100, 25);//从上一点开始绘制一条直线，到（x,y）为止 //绘制时针 context.moveTo(100, 100); context.lineTo(35, 100); //绘制文本 context.font = ;//表示文本样式、大小、字体 context.textAlign = ;//文本对齐方式（start、end、left、right、center）,建议用start、end代替left、right context.textBaseline = ;//文本的基线(top、hanging、middle、alphabetical、ideopgraphic、bottom) context.fillText(, 100, 20); //描边路径 context.stroke(); //额外练习 context.moveTo(230, 10); //arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线，到(x2,y2)为止，并以给定的半径穿过（x1,y1） context.arcTo(280, 60, 330, 10, 50); //bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线，到(x,y)为止，并以(c1x,c1y)(c2x,c2y)为控制点 context.bezierCurveTo(210, 70, 290, 90, 300, 100); context.moveTo(320, 10); //quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线，到(x,y)为止，并以(cx,cy)为控制点 context.quadraticCurveTo(420, 100, 400, 10); //rect(x,y,width,height):从点(x,y)开始绘制矩形，此方法绘制的是矩形路径而不是独立的形状 context.rect(450, 10, 50, 50); context.stroke(); }

　　fillText()绘制文本    strokeText()为文本描边    参数：文本字符串、x坐标、y坐标、可选的最大像素宽度

来源：马开东云搜索（微信/QQ：420434200,微信公众号：makaidong-com）
       欢迎分享本文，转载请保留出处！

[ 1 ] [ 2 ]