Canvas在Android原生开发和传统HTML5开发的舞台上都扮演着重要的角色，我们通过本文了解如何正确使用 canvas 画布，以及如何通过 canvas 绘制复杂的图形及动画。
快应用官方文档提供了快应用logo（如下图）的绘制过程：
本文我们来学习一下快应用开发工具的logo（如下图）的绘制过程：
分析图片
用PhotoShop打开路径为的图片，并添加参考线，主要为了获取透明边框的宽度（你可以理解为图片文件的padding）、蓝色边框的宽度、蓝色圆弧的厚度、红色圆点的直径以及红色和蓝色的具体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);
- // 绘制到终点的线段（右上角）
- ctx.lineTo(h - r, r );
- // 用线段闭合路径（直接从终点连回到起点）
- ctx.closePath();
- // 描边宽度
- ctx.lineWidth = r;
- // 定义描边样式，本次是纯色
- ctx.strokeStyle = '#4286f5';
- // 绘制描边
- ctx.stroke();
- // 定义填充样式，用另一种格式的纯色
- // 注意顺序是R（红色）、G（绿色）、B（蓝色）、A（不透明度）而不是A、R、G、B
- ctx.fillStyle = 'rgba(255,255,255,255)';
- // 绘制填充
- ctx.fill();
- 官方文档和我的注释都很详细，我补充几点：
- 1、strokeStyle和fillStyle的值可以为线性渐变或中心渐变，本文只讨论纯色的情况
- 2、rgba的四个参数分别为R（红色）、G（绿色）、B（蓝色）、A（不透明度）而不是常说的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 。
- 弧线段的填充、描边方式和线段一样。
- 我们再绘制较复杂的蓝色圆弧：
- // 绘制蓝色圆弧
- ctx.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);
- // 顺时针绘制上侧封边
- 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的透明边框变成了白色边框，这是一个瑕疵所在。
本文的完整源码如下：
- <template>
- <div class="doc-page">
- <div class="content" >
- <canvas class="new_canvas" id="newCanvas"></canvas>
- </div>
- </div>
- </template>
- <style>
- .content {
- flex-direction: column;
- align-items: center;
- width: 100%;
- padding: 20px;
- background-color: #000000;
- }
- .new_canvas {
- height: 300px;
- width: 300px;
- background-color: #00000000;
- }
- </style>
- <script>
- export default {
- private: {
- drawComplete: false
- },
- onInit() {
- this.$page.setTitleBar({
- text: 'Canvas'
- })
- },
- onShow() {
- if(!this.drawComplete) {
- this.drawCanvas();
- }
- },
- drawCanvas() {
- const canvas = this.$element('newCanvas'); //获取 canvas 组件
- const ctx = canvas.getContext('2d'); //获取 canvas 绘图上下文
- var r = 20;// 空白处和蓝色边框的宽度
- var h = 300;// 画布大小
- var p = Math.PI;// 圆周率
- var q = Math.sin(45 * 2 * p / 360);// 45度角的正弦（角度乘以 2*PI/360就是弧度）
- var s = 30;// 蓝色圆弧厚度和红色圆点直径
- // 开始绘制路径
- ctx.beginPath();
- // 起点（左上角）
- ctx.moveTo(r , r);
- // 绘制到第二个点的线段(左下角)
- ctx.lineTo(r, h - r );
- // 绘制到第三个点的线段（右下角）
- ctx.lineTo(h - r , h - r);
- // 绘制到终点的线段（右上角）
- ctx.lineTo(h - r, r );
- // 用线段闭合路径（直接从终点连回到起点）
- ctx.closePath();
- // 描边宽度
- ctx.lineWidth = r;
- // 定义描边样式，本次是纯色
- ctx.strokeStyle = '#4286f5';
- // 绘制描边
- ctx.stroke();
- // 定义填充样式，用另一种格式的纯色
- // 注意顺序是R（红色）、G（绿色）、B（蓝色）、A（不透明度）而不是A、R、G、B
- ctx.fillStyle = 'rgba(255,255,255,255)';
- // 绘制填充
- ctx.fill();
- // 绘制蓝色圆弧
- ctx.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);
- // 顺时针绘制上侧封边
- 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();
- // 绘制红色圆点
- 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();
- this.drawComplete = true;
- }
- }
- </script>
