当前位置：首页 > 编程资源 > 编程问答 >内容正文

编程问答

h5 canvas多边形(蜘蛛图)的画法

发布时间：2024/3/24 编程问答 45 豆豆

生活随笔收集整理的这篇文章主要介绍了 h5 canvas多边形(蜘蛛图)的画法小编觉得挺不错的,现在分享给大家,帮大家做个参考.

蜘蛛图的画法:
在开始之前,我们需要知道canvas是如何进行图像的绘制,canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。在矩形区域的画布上，控制其每一像素，JavaScript 来绘制 2D图形，逐像素进行渲染。可以通过多种方法使用canvas 元素绘制路径、矩形、圆形、字符以及添加图像。

注意！！！canvas 标签本身是不具备绘图功能，只能使用 JavaScript 在网页上绘制图像。
效果图如下所示:

1. 初始化js代码

//初始化(function(){var canvas = document.createElement('canvas');document.body.appendChild(canvas);canvas.height = mH;canvas.width = mW;mCtx = canvas.getContext('2d');drawPolygon(mCtx); // 绘制多边形边drawLines(mCtx); //顶点连线drawText(mCtx); // 绘制文本drawRegion(mCtx); // 绘制数据drawCircle(mCtx); // 画数据圆点})();

上面代码中,通过一个立即执行函数,进行对所有的设置进行初始化,对于canvas正六边形的画法,可参见canvas画正六边形
在蜘蛛图中,我们可以进行拆分一下,通过画六边形,直线,圆圈的方式,分别进行完整个体的组件,然后通过方法进行统一调用绘制

如下面所示源代码:

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>蜘蛛图canvas</title><style type="text/css">canvas{}</style> </head> <body> <script type="text/javascript">var mW = 400;var mH = 400;var mData = [['法力', 77],['防御', 72],['生命值', 46],['物理伤害', 50],['回复值', 80],['耐力', 60]];var mCount = mData.length; //边数var mCenter = mW /2; //中心点var mRadius = mCenter - 100; //半径(减去的值用于给绘制的文本留空间)var mAngle = Math.PI * 2 / mCount; //角度var mCtx = null;var mColorPolygon = '#B8B8B8'; //多边形颜色var mColorLines = '#B8B8B8'; //顶点连线颜色var mColorText = '#000000';//初始化(function(){var canvas = document.createElement('canvas');document.body.appendChild(canvas);canvas.height = mH;canvas.width = mW;mCtx = canvas.getContext('2d');drawPolygon(mCtx);drawLines(mCtx);drawText(mCtx);drawRegion(mCtx);drawCircle(mCtx);})();// 绘制多边形边function drawPolygon(ctx){ctx.save(); // save the default statectx.strokeStyle = mColorPolygon;var r = mRadius/ mCount; //单位半径//画6个圈for(var i = 0; i < mCount; i ++){ctx.beginPath(); //开始路径var currR = r * ( i + 1); //当前半径//画6条边for(var j = 0; j < mCount; j ++) {var x = mCenter + currR * Math.cos(mAngle * j);var y = mCenter + currR * Math.sin(mAngle * j);console.log('x:' + x, 'y:' + y);ctx.lineTo(x, y);}ctx.closePath(); //闭合路径ctx.stroke();}ctx.restore(); // restore to the default state}//顶点连线function drawLines(ctx){ctx.save();ctx.beginPath();ctx.strokeStyle = mColorLines;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();}//绘制文本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();}//绘制数据区域function drawRegion(ctx){ctx.save();ctx.beginPath();for(var i = 0; i < mCount; i ++){var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;ctx.lineTo(x, y);}ctx.closePath();ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';ctx.fill();ctx.restore();}//画点function drawCircle(ctx){ctx.save();var r = mCenter / 18;for(var i = 0; i < mCount; i ++){var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;ctx.beginPath();ctx.arc(x, y, r, 0, Math.PI * 2);ctx.fillStyle = 'rgba(255, 0, 0, 0.8)';ctx.fill();}ctx.restore();} </script> </body> </html>

参考链接

总结

以上是生活随笔为你收集整理的h5 canvas多边形(蜘蛛图)的画法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。