Canvas在Android原生开发和传统HT??ML5开发中都扮演着重要的角色。通过本文，我们将学习如何正确使用画布，以及如何通过画布绘制复杂的对象。图形和动画。快应用官方文档提供了快应用logo的绘制过程（如下图）：本篇我们来学习一下快应用开发工具logo的绘制过程（如下图）)：分析图片用PhotoShop打开路径为的图片，添加参考线，主要是获取透明边框的宽度（可以理解为图片文件的padding），蓝色的宽度border，蓝弧的粗细，红点的直径，以及红蓝的具体RGB代码。由于快应用的Canvas不支持透明背景（原文如下），本文成品略有瑕疵。绘制白色填充和蓝色边框Canvas绘图的两种基本绘制方法是绘制填充和描边。所谓填充，就是用指定的内容填充要绘制的图形，最终生成实体图案。绘制填充矩形的方法是这样的：ctx.fillRect(x,y,width,height);所谓描边就是用指定的内容沿着待绘制图形的边缘进行绘制，最后生成一个镂空的图案。绘制描边矩形的方法是ctx.strokeRect(x,y,width,height)。看代码可以知道，如果要填充和描边，必须绘制两次才能完成最终的图案，而且不能自定义描边宽度。为了自定义笔划宽度，我们可以使用路径来实现快应用开发工具的logo蓝边白填充。绘制白色填充和蓝色边框的代码如下：//开始绘制路径ctx.beginPath();//起点（左上角）ctx.moveTo(r,r);//画一条线线段到第二点（左下角）ctx.lineTo(r,h-r);//线段画到第三点（右下角）ctx.lineTo(h-r,h-r);//线段画到theendpoint(右上角)ctx.lineTo(h-r,r);//用线段闭合路径（直接从终点连接到起点）ctx.closePath();//描边宽度ctx.lineWidth=r;//定义描边样式，这次是纯色ctx.strokeStyle='#4286f5';//画一个描边ctx.stroke();//定义填充样式，使用另一种格式的纯色//注意顺序是R(red),G(green),B(blue),A(opacity)而不是A,R,G,Bctx.fillStyle='rgba(255,255,255,255)';//绘制填充ctx。充满（）;官方文档和我的笔记写的很详细，我补充几点：1.strokeStyle和fillStyle的取值可以是线性渐变，也可以是中心渐变。本文只讨论纯色的情况。2.rgba的四个参数是R(red),G(green),B(blue),A(opacity)而不是常说的A,R,G,B绘制蓝色圆弧和红色圆点。画好蓝色边框和白色背景后，下一步就是画蓝色圆弧和红色圆点。红点本质上是一个实心圆，画实心圆的方法是用颜色填充闭合的圆形路径。代码如下：//画一个红点ctx.beginPath();ctx.arc(h-2*s,h-2.5*s,s/2,0,p*2,false);ctx.fillStyle='rgb(234,67,53)'ctx.fill();arc()方法绘制圆弧的五个参数分别是圆心X坐标、圆心Y坐标、半径、圆弧起点、圆弧终点、是否逆时针.弧度的计算方法是用角度乘以2*PI/360。几个关键方向的弧度如下：左：0或2*PI，右：PI，上：P/2，下：P/2*3。圆弧段的填充和描边方法与线段相同。下面画一个比较复杂的蓝色圆弧：//Drawabluearcctx.beginPath();//arc()方法参数是圆心的X坐标，圆心的Y坐标，半径，起点圆弧，终点圆弧，是否逆时针//绘制空心内圆ctx.arc(h/2,h/2,h/6,-p/4,-p/4*7,true);//绘制下侧顺时针封边ctx.arc(h/2+(h/6+s/2)*q,h/2+(h/6+s/2)*q,s/2,-p/4,p/4*7,false);//顺时针画实心外圈ctx.arc(h/2,h/2,h/6+s,-p/4*7,-p/4,false);//Clockwise顺时针绘制上边条ctx.arc(h/2+(h/6+s/2)*q,h/2-(h/6+s/2)*q,s/2,-p/4*7,p/4,false);//填充颜色ctx.fillStyle='#4286f5';ctx.fill();注意圆弧也必须闭合，否则会有bug。本文成品及完整源码如下图所示注：如前所述，快应用的Canvas暂时不支持透明背景，所以官方logo的透明边框变成了白色边界，这是一个缺陷。本文完整源码如下：
