使用Canvas绘制一个游戏人物属性图


Posted in Javascript onMarch 25, 2022

前言

身为一个程序员竟然沉迷游戏,wtf??? 都怪腾讯前几天出了一款叫做寻仙的手游,作为曾经的资深玩家,小V君犹豫再三还是忍不住入坑了。入坑了怎么不去打游戏,还在这里发文章? 不不不,小V君今天在这里可不是要跟大家讨论游戏,作为一个好好学习,天天向上的有位少年,游戏嘛,只是业余的,码代码才是王道!!!所以小V君今天给大家分享一下怎么使用Canvas来绘制一个游戏登录界面的人物属性图!

先上一波图片,怎么样? 人物是不是很帅,很中国风???小V君当年可是花了四年时间来玩这个人物哦。。。

使用Canvas绘制一个游戏人物属性图

一. 什么是Canvas?

canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。 在矩形区域的画布上,控制其每一像素,JavaScript 来绘制 2D图形,逐像素进行渲染。可以通过多种方法使用canvas 元素绘制路径、矩形、圆形、字符以及添加图像。

注意!!!

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,
    mColorPolygon = '#000000',
    mData = [
      ['爆发', 100],
      ['防御', 60],
      ['治疗', 50],
      ['控制', 60],
      ['辅助', 30],
      ['机动', 70]
    ],
    mColorText = '#000000',
    canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    canvas.width = mW;
    canvas.height = mH;
    mCtx = canvas.getContext('2d');

首先,我们需要指定一个id属性 (脚本中经常引用), 再使用width 和 height 属性定义的画布的大小.在这里我将画布的宽和高都设置为400,六边形嘛,数量当然是6,图形的中心等于它自身宽度的一半,线条的颜色就使用黑色,在利用一个数组写上自定义的数据就可以开始绘画啦。

细心的朋友可能会问mRadius为什么等于mCenter减50呢?在这里,请允许小V君卖个关子,大家看完就自然知道结果啦~~~

绘制六个内嵌的六边形

function drawPolygon(ctx) {
    ctx.save();   // save the default state
    ctx.strokeStyle = mColorPolygon;
    var r = mRadius / mCount;
    for(var i = 0; i < mCount; i++) {
        ctx.beginPath();   //开始路径
        var currR = r * (i + 1);
        for(var j = 0; j < mCount; j++) {
            var x = mCenter + currR*Math.cos(mAngle*j);
            var y = mCenter + currR*Math.sin(mAngle*j);
            ctx.lineTo(x, y);  
        }
        ctx.closePath();  //闭合路径
        ctx.stroke()  // restore to the default state
    }
    ctx.restore();
}

为了代码整体的美观和复用性,我们定一个名为drawPolygon的函数,再使用一个for循环来完成六边形的绘制。看到这里,大家可能会问怎么还使用了sin和cos函数了,想当年学数学那可是一个受罪,怎么现在还要受它的折磨。。。小V君也深表无奈,代码跟数学本来就是一家,代码里面很多地方都要运用Math函数,所以在数学这个坑上小V君与大家同在(┬_┬)。(ps:js中需要用到的数学公式很多网上都有,不需要自己手写,只要增加点印象,一个复制就可以拉过来用了,啦啦啦,小V君也很会偷懒的,哈哈哈~~~)

使用Canvas绘制一个游戏人物属性图

绘制直线

function drawLines(ctx) {
  ctx.save();
  ctx.beginPath();
  ctx.strokeStyle = mColorPolygon;
  for( var i = 0; i< mCount; i++){
    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的函数来实现这部分功能。Canvas画线相对来说比较简单,比较难理解的估计还是在这个for循环的函数里面,对于六边形的绘制大家可以参考一下这篇博文 ? 如何绘制六边形

使用Canvas绘制一个游戏人物属性图

绘制覆盖区域

function drawRegion(ctx) {
  ctx.save();
  ctx.beginPath();
  for(var i = 0; i< mCount; i++){
    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.closePath();
  ctx.fillStyle = 'rgba(255,0,0,.5)';
  ctx.fill();
  ctx.store();
}

写到这里,我们的属性图差不多就绘制完成了。但是,图形内的颜色具体是怎么进行填充的呢?在这里我们使用了fill语法进行填充,在代码中只需要使用ctx.fill()就可以实现了。

解释:填充,是将闭合的路径的内容填充具体的颜色,在这里我设置了透明度为0.5的红色,默认颜色黑色。如果所有的描点没有构成封闭结构,也会自动构成一个封闭图形。

使用Canvas绘制一个游戏人物属性图

绘制文本

function drawText(ctx) {
  ctx.save();
  var fontSize = mCenter/12;
  ctx.font = fontSize + 'px Microsoft Yahei';
  ctx.fillStyle = mColorText;
  for(var i = 0; i< mCount; i++){
    var x = mCenter + mRadius*Math.cos(mAngle*i);
    var y = mCenter + mRadius*Math.sin(mAngle*i);
    //通过不同的位置,调整文本的显示位置
    if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){
            ctx.fillText(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]).width, y + fontSize);
        }else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){
            ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
        }else{
            ctx.fillText(mData[i][0], x, y);
        }
  }
  ctx.restore();
}

至此,我们的人物属性图就绘制好了。不知道各位看完之后有没有想明白前面小V君埋下的问题呢?50px,对的,mRadius等于mCenter减50中的那50px就是给我们的文本留出来的位置,代码中的if语句就是通过不同的位置来调整文本的显示位置。

使用Canvas绘制一个游戏人物属性图

四. 小结

综上所述,简单说明了如何使用Canvas来绘制一个人物属性图,以上内容属个人理解和网上学习总结,如有错误,欢迎指正共勉。关于Canvas这个元素,它应用的领域可是非常的广阔哦。比如在游戏方面,canvas在基于Web的图像显示方面比Flash更加立体、更加精巧,canvas游戏在流畅度和跨平台方面更牛。在可视化数据方面,百度的echart、d3.js、three.js等等用运用到了canvas。如果你以为Canvas的运用只有这些,那就打错特错了,在现在以及未来的智能机时代,HTML5技术能够在banner广告上发挥巨大作用,而使用Canvas来实现动态的广告效果再合适不过。

到此这篇关于使用Canvas绘制一个游戏人物属性图的文章就介绍到这了,更多相关Canvas游戏人物属性图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
Javascript 相关文章推荐
多个js与css文件的合并方法详细说明
Dec 26 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
【js设计模式】SOLID五大设计原则
什么是SOLID
Vue3中toRef与toRefs的区别
Mar 24 #Vue.js
Javascript的promise,async和await的区别详解
Mar 24 #Javascript
一起来看看Vue的核心原理剖析
Mar 24 #Vue.js
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 #Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 #Vue.js
You might like
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
php如何连接sql server
2015/10/16 PHP
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
python中常用检测字符串相关函数汇总
2015/04/15 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
致100米运动员广播稿
2014/02/14 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
向领导表决心的话
2014/03/11 职场文书
节约用水倡议书
2014/04/16 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
规范化管理年活动总结
2014/08/29 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
物业工程部岗位职责
2015/02/11 职场文书
法律讲堂观后感
2015/06/11 职场文书
党性修养心得体会2016
2016/01/21 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
mybatis 获取更新记录的id
2022/05/20 Java/Android