彩蛋——canvas如何画出1PX的直线
在这里我举一个例子， 你就明白了， 假设我要画从（50，10） 到 （200，10）这样的一条直线。为了画这条线，浏览器首先到达初始起点(50，10)。这条线宽1px，所以两边各留0.5px。所以基本上初始起点是从(50，9.5)延伸到(50，10.5)。现在浏览器不能在屏幕上显示0.5像素——最小阈值是1像素。浏览器别无选择，只能将起点的边界延伸到屏幕上的实际像素边界。它会在两边再加0.5倍的“垃圾”。所以现在，最初的起点是从(50，9)扩展到(50，11)，所以看起来有2px宽。情况如下:
实际效果图
现在你就应该明白了原来「浏览器不能显示0.5像素哇， 四舍五入了」， 知道了 问题我们就一定有解决方案
平移canvas
ctx.translate (x,y ) 这个方法：
translate() 方法, 将 canvas 按原始 x点的水平方向、原始的 y点垂直方向进行「平移变换」
如图：
canvas平移
说的更直白点， 你对canvas做了translate变化后， 你之前所有画的点，都会相对偏移。所以呢，回到我们这个问题上来， 解决办法就是什么呢？就我将画布 整体向下偏移 0.5 ， 所以原本坐标 （50，10） 变成了（50.5,10.5） 和（200.5, 10.5）ok 然后浏览器的再去画的 他还是要预留像素， 所以就是从（50.5, 10） 到（50.5, 11） 这个区间去画OK， 就是1px了。我们来try it.
代码如下：
this.ctx.translate(0.5, 0.5) // 画x轴 this.drawLine( this.originX, this.originY, this.originX, this.originY - this.cHeight ) // 画Y轴 this.drawLine( this.originX, this.originY, this.originX + this.cWidth, this.originY ) this.ctx.translate(-0.5, -0.5)
偏移完之后还是要恢复过去的， 还是要十分注意的。我画了两张图作比对：
偏移后
偏移前
不多说了， 看到这里，如果觉得对你有帮助的话， 或者学到了话， 我是希望你给我点赞👍、评论、加收藏。
画标尺
我们现在只有X轴和Y轴， 光秃秃的，我给X轴和Y轴底部增加一些标尺，X轴对应的标尺，肯定就是每个国家的名字，大概的思路就是数据的数量去做一个分段， 然后去填充就好了。
代码如下：
drawXlabel() { const length = this.data.slice(0, 10).length this.ctx.textAlign = 'center' for (let i = 0; i < length; i++) { const { country } = this.data[i] const totalWidth = this.cWidth - 20 const xMarker = parseInt( this.originX + totalWidth * (i / length) + this.rectWidth ) const yMarker = this.originY + 15 this.ctx.fillText(country, xMarker, yMarker, 40) // 文字 } }
这里的话我截取了排名前10的国家， 分段的思路， 首先两边留白20px, 我们首先先定义每一个柱状图的宽度 假设是 30 对应上文的 this.rectWidth, 然后每个文字的坐标 其实就很好算了， 起初的x + 所占的分端数 + 矩形宽度就可以画出来了
如图：
X轴标尺
x轴画完了，我们开始画Y轴， Y轴的大概思路就是 以最多的奖牌数去做分段， 这里我就分成6段吧。
// 定义Y轴的分段数 this.ySegments = 6 //定义字体最大宽度 this.fontMaxWidth = 40
接下啦我们就开始计算Y轴每个点的Y坐标， X坐标其实很好计算 只要原点坐标的X向左平移几个距离就好了，主要是计算Y轴的坐标， 这里一定要注意的是， 我们从坐标是相对于左上角的， 所以呢， Y轴的坐标应该是向上递减的。
drawYlabel() { const { jin: maxValue } = this.data[0] this.ctx.textAlign = 'right' for (let i = 1; i <= this.ySegments; i++) { const markerVal = parseInt(maxValue * (i / this.ySegments)) const xMarker = this.originX - 5 const yMarker = parseInt((this.cHeight * (this.ySegments - i)) / this.ySegments) + this.padding + 20 this.ctx.fillText(markerVal, xMarker, yMarker) // 文字 } }
最大的数据就是数组的第一个数据， 然后每个标尺就是所占的比例就好了， Y轴的坐标由于我们是递减的所以 对应的坐标应该是 1- 所占的份额， 由于这只是算的图标的实际高度 ，换算到画布里面， 还要加上原先我们设置的内边距，由于又加上了文字， 文字也占有一定像素， 所以有加上了20。OK Y轴画结束了， 有了Y轴每个分段的坐标， 同时就画出背后的对应的几条实线。
代码如下：
this.drawLine( this.originX, yMarker - 4, this.originX + this.cWidth, yMarker - 4 )
最终呈现的效果图如下：
xy轴
画矩形
everything isReady, 下面开始画矩形， 还是同样的方式 先封装画矩形的方法， 然后我们只要传入对应的数据就OK了。
这里用到了，canvas原生的rect 方法。参数理解如下：
rect语法
矩形宽度 我们自定义的， 矩形的高度就是对应的奖牌数在画布中的高度， 所以我们只要确定 矩形的起点就搞定了， 这里矩形的（x,y） 其实是左上角的点。
代码如下：
//绘制方块 drawRect(x, y, width, height) { this.ctx.beginPath() this.ctx.rect(x, y, width, height) this.ctx.fill() this.ctx.closePath() }
第一步我们先做一个点的映射， 我们在画Y轴的时候，将Y轴的上的画布的所有的点都放在一个数组中， 注意记得将原点的Y放进去。所以只要计算出每个奖牌数在总部的比例是多少？然后再用原点的Y值做一个相减就可以得到真正的Y轴坐标了。X轴的坐标就比较简单了，原点的X坐标加上 （ 所占的比例 / 总长度 ） 然后在加上 一半的矩形宽度就好了。这个道理和画文字是一样的， 只不过文字要居中嘛。
代码如下：
drawBars() { const length = this.data.slice(0, 10).length const { jin: max } = this.data[0] const diff = this.yPoints[0] - this.yPoints[this.yPoints.length - 1] for (let i = 0; i < length; i++) { const { jin: count } = this.data[i] const barH = (count / max) * diff const y = this.originY - barH const totalWidth = this.cWidth - 20 const x = parseInt( this.originX + totalWidth * (i / length) + this.rectWidth / 2 ) this.drawRect(x, y, this.rectWidth, barH) } }
画出的效果图如下：
奖牌数
矩形交互优化
黑秃秃的也丑了吧，一个不知道的人根本不知道这是哪一个国家获得多少块金牌。
- 给矩形加一个渐变
- 加一些文字
现在画矩形的基础上加一些文字吧，代码如下：
this.ctx.save() this.ctx.textAlign = 'center' this.ctx.fillText(count, x + this.rectWidth / 2, y - 5) this.ctx.restore()
渐变就设计到Canvas一个api了，createLinearGradient
❝❞
createLinearGradient()方法需要指定四个参数，分别表示渐变线段的开始和结束点。
那我就开始了首先肯定创建渐变：
getGradient() { const gradient = this.ctx.createLinearGradient(0, 0, 0, 300) gradient.addColorStop(0, 'green') gradient.addColorStop(1, 'rgba(67,203,36,1)') return gradient }
然后呢我们就改造drawReact下 ，这里用了 restore 和save 这个方法， 防止污染文字的样式。
//绘制方块 drawRect(x, y, width, height) { this.ctx.save() this.ctx.beginPath() const gradient = this.getGradient() this.ctx.fillStyle = gradient this.ctx.strokeStyle = gradient this.ctx.rect(x, y, width, height) this.ctx.fill() this.ctx.closePath() this.ctx.restore() }
如图所示：
渐变图
添加动画效果
光一个静态的不能看出我们的牛皮🐂，所以得有动画的效果慢慢的增加对吧。其实我们可以思考🤔下整个动画过程，变化的其实就两个， 柱状图的高度和文字， 其实坐标轴， 以及柱状图的x坐标是不变的， 所以我只要定义两个变量一个开始的值 ，和一个总共的值，高度和文字的大小 其实在每一帧去乘以对应的高度就可以了。
代码如下：
// 运动相关 this.ctr = 1 this.numctr = 100
我们改造下drawBars 这个方法：
// 每一次的比例是多少 const dis = this.ctr / this.numctr // 柱状图的高度 乘以对应的比例 const barH = (count / max) * diff * dis // 文字这里取整下，因为有可能除不尽 this.ctx.fillText( parseInt(count * dis), x + this.rectWidth / 2, y - 5 ) // 最后执行动画 if (this.ctr < this.numctr) { this.ctr++ requestAnimationFrame(() => { this.ctx.clearRect(0, 0, this.width, this.height) this.drawLineLabelMarkers() }) }
每一次都加一，直到比总数大， 然后不断重画。就可以形成动画效果了。我们看下gif图吧：
奥运gif图
