详解canvas多边形(蜘蛛图)的画法示例
程序员文章站
2022-06-14 17:32:58
这篇文章主要介绍了详解canvas多边形(蜘蛛图)的画法示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧... 18-01-29...
蜘蛛图的画法:
在开始之前,我们需要知道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 state
ctx.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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。