canvas 从初级到XX 1# 部分非基础原生API的使用 [初级向]_H5之家

人保财险个人贷款抵押房屋综合保险_canvas 从初级到XX 1# 部分非基础原生API的使用 [初级向]

标题canvas 从初级到XX，XX是因为本文随机都可能会太监，并不会支持到入土。请慎重的往下看。

对于canvas的介绍，随处都可以找到，也就不啰嗦太多了。就直奔主题了。

先看一段代码，以及实现的效果吧。

drawing(canvas, [80,40,30,20,20])

其实，准备使用下面的代码，然后大家看的时候，刷新页面就有不同的效果的，但是由于博客不能插入js，就无法实现这个预想了。等最后给大家介绍完毕之后。可以使用这个代码来看一下效果。

ps：如果有大神可以私信、留言告诉我，怎么在博客中插入js。我会十分感激的。

1 var canvas = document.getElementById("drawing") 2 var arr = [] 3 for (var i = Math.random() * 7 + 3; i >= 0; i--) { 4 arr.push(Math.random()*100) 5 } 6 drawing(canvas, arr)

好了。现在让我们进入真正的正题吧。

绘制前的分析
绘制canvas之前，必须要获取到context。

var can = document.getElementById("drawing") var ctx = can.getContext("2d")

现在，我们做一下分析，
上面的截图是一个标准的雷达图。暂时是以100为满值，写出的方法。每一格为20。
我们暂时将满值的线长，以及这个图最终在canvas中的定位进行一个假设。我们假设线长200varlineLength = 200，最终绘制在canvas的正中心

背景的绘制
现在，让我们把背景图绘制出来吧。
图片中的背景是五边形，以及假设满值的长度为200，中间分5端。简单来说也就是5个五边形构成的。丹阳蜘蛛资讯网
总之，先让我们来画出一个五边形好了。
既然决定好了，要将整个图绘制在canvas的正中心。那么是不是应该这样写：var width = canvas.width；ctx.moveTo(width / 2, n)，然后再ctx.lineTo(n, n)到其他4个点?
各个n的值，我们先待定，莆田蜘蛛资讯网但是要在中心的话以，width / 2 为顶点的x值。似乎很有道理。但是确实如此吗？
如果，这样做，那之后4个点的定位。我们还需要利用三角函数以及各种复杂而北海蜘蛛资讯网又麻烦的运算来得出它们的定位。这明显不符合我们懒惰的设定啊。
这个时候也就该搬出第一个经常被忽略的方法了。

ctx.translate(width / 2, height / 2)

这个方法，不做过多的解释了，随处都可以查到（将canvas上的原点，映射到参数的坐标）。
此时，坐标(0, 0)，已经改至了canvas的中心位置，那之后的代码要如何做呢？ctx.moveTo(0, -lineLength)，这样在y 轴上，向上方移动我们需要的线长，就可以定位到顶点了。比计算一个n，要简单的多了。
现在蹦出一个吐槽的说，之后的4个点，还是要通过三角函数来计算才可以得到，依旧还是有很大的运算量。
可是，我们目前在通过三角函数计算之后，得出的值，已经不需要再加上，或者减去width / 2 , height / 2，以保证中心点的位置了。况且，我还没有说之后的点要怎么画呢。
还是先放出，五边形的绘制代码吧。

for (var i = 0; i < 5; i++) { ctx.moveTo(0, -lineLength) ctx.rotate(Math.PI * 2 / 5) ctx.lineTo(0, -lineLength) }
ctx.stroke()

这里出现了ctx.rotate(Math.PI * 2 / 5)这个方法。也就是将整个canvas绕着原点(0,0)旋转。只不过这里的参数需要输入弧度。Math.PI * 2为一整圈。
所以，这个循环中的lineTo虽然参数一直是一样的。但是，我们每次都将画布旋转了一些。。这个一些要具体怎么描述，我说不清，反正就是五分之一个圆吧。
至此，也就可以画出一个五边形了。但是要绘制出背景的效果。肯定是不能只画一个五边形的。

ctx.beginPath() for (var i = 0; i < 5; i++) { drawStar(lineLength * (i + 1) / 5) }
ctx.strokeStyle = "#666" ctx.stroke() function drawStar(length) { for (var i = 0; i < 5; i++) { ctx.moveTo(0, 0) ctx.lineTo(0, -length) ctx.rotate(Math.PI * 2 / 5) ctx.lineTo(0, -length) } }

至此，背景就绘制出来了。

值的绘制
其实背景被绘制出来之后，在上面绘制值就相对简单的多了。直接（打码）上代码吧。

var arr = [80,40,30,20,20]
arr.forEach(function (v, i) { var trueLength = v * lineLength / max if (i === 0) { ctx.beginPath() ctx.moveTo(0, -trueLength) } else { 秦皇岛蜘蛛资讯网 ctx.lineTo(0, -trueLength) } ctx.rotate(Math.PI * 2 / 5) }) ctx.closePath() ctx.fillStyle = "rgba(202,202,115,.5)" ctx.fill()

这里的代码。主要的应用点，和绘制背景的大致相同，也就不做过多的讲解了。

函数的封装
封装前，我们大概分析一下可以看出来，背景图是基本固定的，主要是数据会改动。那么函数内部主要可以分成2块。一部分绘制背景，一部分绘制数据。
在本文最初，我们预期可以输入不同长度的数组数据。可以生成相应的多边形，然后将数据填充进去。这样也就是依照数据的length，来绘制多边形。
还是直接上代码吧。

1 function drawing(dom, data, config) { 2 var ctx = dom.getContext("2d") 3 var width = dom.width 4 var height = dom.height 5 var lineLength = config.lineLength || 200 6 var max = config.max || 100 7 var num = data.length; 8 ctx.strokeStyle = "#666" 9 ctx.fillStyle = "rgba(202,202,115,.5)" 10 ctx.translate(width * .5, height * .5) 11 drawBackground(num) 12 data.forEach(function (v, i) { 13 var trueLength = v * lineLength / max 14 if (i === 0) { 15 ctx.beginPath() 16 ctx.moveTo(0, -trueLength) 17 } else { 18 ctx.lineTo(0, -trueLength) 19 } 20 ctx.rotate(Math.PI * 2 / num) 21 }) 22 23 ctx.closePath() 24 ctx.fill() drawBackgroun临汾蜘蛛资讯网d(num) { 27 ctx.beginPath() 28 for (var i = 0; i < 5; i++) { 29 drawStar(ctx, lineLength * (i + 1) / 5) 30 } 31 ctx.stroke() drawStar(ctx, length) { 34 for (var i = 0; i < num; i++) { 35 ctx.moveTo(0, 0) 36 ctx.lineTo(0, -length) 37 ctx.rotate(Math.PI * 2 / num) 38 ctx.lineTo(0, -length) 39 } 40 } 41 } 42 }