canvas多边形的画法示例

来源：动视网责编：小OO 时间：2020-11-27 15:06:28

canvas多边形的画法示例

蜘蛛图的画法。在开始之前，我们需要知道canvas是如何进行图像的绘制，canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。在矩形区域的画布上，控制其每一像素，JavaScript 来绘制 2D图形，逐像素进行渲染。可以通过多种方法使用canvas 元素绘制路径、矩形、圆形、字符以及添加图像。* 注意。canvas 标签本身是不具备绘图功能，只能使用 JavaScript 在网页上绘制图像。效果图如下所示。1.初始化js代码；上面代码中，通过一个立即执行函数，进行对所有的设置进行初始化，对于canvas正六边形的画法，可参见canvas画正六边形。

推荐度：

点击下载本文 文档为doc格式

导读蜘蛛图的画法。在开始之前，我们需要知道canvas是如何进行图像的绘制，canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。在矩形区域的画布上，控制其每一像素，JavaScript 来绘制 2D图形，逐像素进行渲染。可以通过多种方法使用canvas 元素绘制路径、矩形、圆形、字符以及添加图像。* 注意。canvas 标签本身是不具备绘图功能，只能使用 JavaScript 在网页上绘制图像。效果图如下所示。1.初始化js代码；上面代码中，通过一个立即执行函数，进行对所有的设置进行初始化，对于canvas正六边形的画法，可参见canvas画正六边形。

本文主要介绍了canvas多边形(蜘蛛图)的画法示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

蜘蛛图的画法:

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

* 注意！！！canvas 标签本身是不具备绘图功能，只能使用 JavaScript 在网页上绘制图像。

效果图如下所示:

1. 初始化js代码

上面代码中,通过一个立即执行函数,进行对所有的设置进行初始化,对于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>

canvas多边形的画法示例

推荐度：

点击下载本文 文档为doc格式

标签：示例多边形的画法

热门焦点

canvas多边形的画法示例

canvas多边形的画法示例

canvas多边形的画法示例

最新推荐

猜你喜欢

热门推荐