蜘蛛图的画法:
在刚开始以前,大家必须了解canvas是怎样开展图象的绘图,canvas 元素用于在网页页面上绘图图型。HTML5 的 canvas 元素应用 JavaScript 在网页页面上绘图2D图象。 在矩形框地区的画布上，操纵其每像素，JavaScript 来绘图 2D图型，逐像素开展3D渲染。能够根据多种多样方式应用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); // 画数据信息圆点
})();
上面编码中,根据1个马上实行涵数,开展对全部的设定开展原始化,针对canvas正6边形的画法,可参照canvas画正6边形
在蜘蛛图中,大家能够开展拆分1下,根据画6边形,平行线,圆圈的方法,各自开展详细个人的组件,随后根据方式开展统1启用绘图
以下面所示源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<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>
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。