canvas画动图,利用canvas绘制图形
前言
作为一个程序员，沉迷游戏，wtf？都是因为腾讯前几天推出了一款叫《寻仙》的手游。作为曾经的资深玩家，小V君犹豫再三，忍不住入坑。为什么没入坑在这里打游戏贴文章？不不不，小V君今天不是来和你讨论游戏的。作为一个认真学习天天向上的少年，游戏只是业余，代码才是王道！所以小V君今天就给大家分享一下如何用Canvas绘制一个游戏登录界面的角色属性图！
最后一波图怎么样？人物帅不帅，中国人？v君花了四年时间来演这个角色。
一. 什么是Canvas？
canvas元素用于在网页上绘制图形。HTML5的canvas元素使用JavaScript在网页上绘制2D图像。在矩形区域的画布上，控制每个像素，JavaScript绘制2D图形，并逐像素渲染。使用画布元素绘制路径、矩形、圆形、字符和添加图像的方法有很多种。
立正！
Canvas标签本身没有画图功能，只能用JavaScript在网页上画图。
二. 任务分析
为了简洁明了，小V君没有在页面上花太多时间。我希望你不介意。毕竟JS才是今天的主角。
首先，我们来简单分析一下。这个角色的属性贴图由六个嵌入的正六边形组成，然后六条线连接正六边形的中心。最后，根据角色的属性填充颜色。最近怎么样？不是很简单吗？只需要三步就可以画出这个游戏角色的属性图。你可能觉得小V君说起来容易，但是实际上应该怎么做呢？别担心，先生们，我会把密码发给你们。
三. 代码部分
var mW=400，mH=400，mCtx=null，mCount=6，mCenter=mW/2，mRadius=mCenter - 50，mAngle=Math。PI*2/mCount，M color polygon= # 000000 ，mdata=[爆发，100]，[防御，60]，[治疗，50]，[控制，60]，[辅助，30]，[机动，70 document . body . appendchild(canvas)；canvas.width=mWcanvas.height=mHmCtx=canvas . get context( 2d )；首先，我们需要指定一个id属性(通常在脚本中引用)，然后使用width和height属性来定义画布的大小。在这里，我将画布的宽度和高度设置为400，六边形，数字当然是6。图形的中心等于其自身宽度的一半，线条的颜色为黑色。您可以通过在数组中写入自定义数据来开始绘画。
细心的朋友可能会问为什么mRadius等于mCenter减50。在此，请允许小V君卖个关子，大家看完自然知道结果~ ~ ~
绘制六个内嵌的六边形
函数draw polygon(CTX){ CTX . save()；//保存默认状态ctx.strokeStyle=mColorPolygonvar r=mRadius/m count；for(var I=0；i mCountI){ CTX . begin path()；//开始路径var currR=r *(I 1)；for(var j=0；j mCountj){ var x=mCenter currR * math . cos(mAngle * j)；var y=mCenter currR * math . sin(mAngle * j)；ctx.lineTo(x，y)；} CTX . close path()；//关闭路径CTX . stroke()//恢复到默认状态} CTX . restore()；}为了代码的整体美观和可重用性，我们设置了一个名为drawPolygon的函数，然后使用一个for循环来完成六边形的绘制。看到这里你可能会问为什么还用sin和cos函数？当年学数学是一种痛苦，为什么现在还要受这种痛苦？萧军也是深感无奈。代码和数学是一家人，代码里很多地方都用到数学函数，所以在这个数学的坑里萧军和大家在一起( _ ).(PS:很多JS中需要用到的数学公式网上都有，不需要自己写。只要加上一些印象，一份复印件就可以了。啦啦啦，小V君也很懒，哈哈哈~ ~)
绘制直线
函数drawLines(CTX){ CTX . save()；CTX . begin path()；ctx.strokeStyle=mColorPolygonfor(var I=0；i mCountI){ var x=mCenter mRadius * math . cos(mAngle * I)；var y=mCenter mRadius * math . sin(mAngle * I)；ctx.moveTo(mCenter，mCenter)；ctx.lineTo(x，y)；} ctx.stroke()。CTX . restore()；}同样，定义一个名为drawLines的函数来实现这部分功能。画布画线比较简单，比较难懂的估计还是在这个for循环的函数里。要画六边形，可以参考这篇博文？如何画六边形
绘制覆盖区域
函数draw region(CTX){ CTX . save()；CTX . begin path()；for(var I=0；i mCountI){ var x=mCenter mRadius * math . cos(mAngle * I)* mData[I][5]/100；var y=mCenter mRadius * math . sin(mAngle * I)* mData[I][6]/100；ctx.lineTo(x，y)；} CTX . close path()；ctx.fillStyle=rgba(255，0，0， 5)；CTX . fill()；CTX . store()；}写到这里，我们的属性图也差不多完成了。但是，图形中的颜色是如何填充的呢？这里我们使用fill语法进行填充，只有在代码中使用ctx.fill()才能实现。
说明：填充就是用特定的颜色填充封闭路径的内容。这里，我设置红色透明度为0.5，黑色为默认颜色。如果所有的描点都没有形成封闭的结构，就会自动形成封闭的图形。
绘制文本
函数drawText(CTX){ CTX . save()；var font size=MC center/12；ctx.font=fontSize px微软雅黑；ctx.fillStyle=mColorTextfor(var I=0；i mCountI){ var x=mCenter mRadius * math . cos(mAngle * I)；var y=mCenter mRadius * math . sin(mAngle * I)；//通过不同的位置调整文本if(mangle * I=0m mangle * I=math.pi/2){ CTX . fill text(mdata[I][0]，x，y fontsize)的显示位置；}else if(mAngle * i Math。PI/2 mAngle * i=Math。PI){ ctx.fillText(mData[i][0]，x - ctx.measureText(mData[i][0])。宽度，y fontSize)；}else if(mAngle * i Math。PI mAngle * i=数学。PI * 3/2){ CTX . fill text(mData[I][0]，x - ctx.measureText(mData[i][0])。宽度，y)；}else{ ctx.fillText(mData[i][0]，x，y)；} } CTX . restore()；}至此，我们的角色属性图已经绘制完毕。不知道大家看之前想不想明白小V埋下的问题。50px，没错。mRadius等于mCenter减50。M中心减50的50px是留给我们正文的位置。代码中的if语句是通过不同的位置来调整文本的显示位置。
四. 小结
综上所述，简单说明了如何使用Canvas绘制角色属性图。以上内容是个人理解和网上学习的总结。如有错误，请指正鼓励。至于画布，它的应用领域非常广泛。比如游戏方面，canvas在基于网页的图像显示方面比Flash更立体，更精致，canvas游戏更流畅，跨平台。在可视化数据方面，百度的echart、d3.js、three.js等都应用到了canvas上。如果你认为这是画布的唯一应用，那你就错了。在现在和未来的智能机时代，HTML5技术可以在banner广告中发挥巨大的作用，用Canvas实现动态广告效果再合适不过了。
关于用画布绘制游戏角色属性图的这篇文章到此为止。关于Canvas游戏角色属性地图的更多信息，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。