canvas多邊形的畫法範例
本文主要介紹了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 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多邊形的畫法範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Python函數介紹：exec函數的介紹及範例
Nov 03, 2023 pm 02:09 PM
Python函數介紹：exec函數的介紹及範例引言：在Python中，exec是一種內建函數，它用於執行儲存在字串或檔案中的Python程式碼。 exec函數提供了一種動態執行程式碼的方式，使得程式可以在執行時間根據需要產生、修改和執行程式碼。本文將介紹exec函數的使用方法，並給出一些實際的程式碼範例。 exec函式的使用方法：exec函式的基本語法如下圖所示：exec
Oracle DECODE函數詳解及用法範例
Mar 08, 2024 pm 03:51 PM
Oracle中的DECODE函數是一種條件式，常用於在查詢語句中根據不同的條件傳回不同的結果。本文將詳細介紹DECODE函數的語法、用法和範例程式碼。一、DECODE函數語法DECODE(expr,search1,result1[,search2,result2,...,default])expr：要進行比較的表達式或欄位。 search1,
Python函數介紹：isinstance函數的用法和範例
Nov 04, 2023 pm 03:15 PM
Python函數介紹：isinstance函數的用法和範例Python是一門功能強大的程式語言，提供了許多內建函數，使得程式設計變得更加方便和有效率。其中一個非常有用的內建函數是isinstance()函數。本文將介紹isinstance函數的用法和範例，並提供具體的程式碼範例。 isinstance()函數用來判斷一個物件是否是指定的類別或類型的實例。該函數的語法如下
Go語言的縮排規範及範例
Mar 22, 2024 pm 09:33 PM
Go语言的缩进规范及示例Go语言是一种由Google开发的编程语言，它以简洁、清晰的语法著称，其中缩进规范在代码的可读性和美观性方面起着至关重要的作用。本文将介绍Go语言的缩进规范，并通过具体的代码示例进行详细说明。缩进规范在Go语言中，缩进使用制表符（tab）而非空格。每级缩进为一个制表符，通常设置为4个空格的宽度。这样的规范统一了代码风格，使得团队合作编
學習canvas框架 詳解常用的canvas框架
Jan 17, 2024 am 11:03 AM
探索Canvas框架：了解常用的Canvas框架有哪些，需要具體程式碼範例引言：Canvas是HTML5中提供的一個繪圖API，透過它我們可以實現豐富的圖形和動畫效果。為了提高繪圖的效率和便利性，許多開發者開發了不同的Canvas框架。本文將介紹一些常用的Canvas框架，並提供具體程式碼範例，以幫助讀者更深入地了解這些框架的使用方法。一、EaselJS框架Ea
Python函數介紹：eval函數的函數與範例
Nov 04, 2023 pm 12:24 PM
Python函數介紹：eval函數的功能和範例在Python程式設計中，eval函數是非常有用的一個函數。 eval函數可以將一個字串作為程式碼執行，它的功能非常強大。在本文中，我們將介紹eval函數的詳細功能，以及一些使用範例。一、eval函數的函數eval函數的功能非常簡單，它可以將一個字串作為Python程式碼來執行。這意味著，我們可以將一個字串
PHP 點運算子的運用與實例分析
Mar 28, 2024 pm 12:06 PM
PHP點運算子的運用與實例分析在PHP中，點運算子（「.」）是用來連接兩個字串的運算符，它在字串拼接時非常常用且十分靈活。透過使用點運算符，我們可以方便地將多個字串連接起來，構成一個新的字串。以下將透過實例分析來介紹PHP點操作符的運用。一、基本使用方法首先，我們來看一個基本的使用實例。假設有兩個變數$str1和$str2，分別儲存了兩個字
Python函數介紹：sorted函數的函數和範例
Nov 03, 2023 pm 02:47 PM
Python函數介紹：sorted函數的功能和範例Python是一門非常強大的程式語言，擁有豐富的內建函數和模組。在這個系列文章中，我們將逐一介紹Python常用的函數，並提供對應的範例來幫助讀者更好地理解和應用這些函數。本篇文章將詳細介紹sorted函數的功能和範例。 sorted函數用於對可迭代物件進行排序，並傳回排序後的新列表。可以用於對數字、字
