Canvas繪製正多邊形及五角星

阿新 • • 發佈：2019-01-15

一般常用的繪圖技術有三種：Svg,Canvas和WebGL

在正式使用Canvas繪製多邊形及五角星之前，請允許我向大家簡單的介紹下Canvas繪圖之路徑的基本語法結構

ctx.beginPath() -------- 開始一條新路徑

ctx.closePath() -------- 閉合當前路徑

ctx.lineWidth = 1 ------ 描邊寬度

ctx.fillStyle = "#000" 填充樣式或顏色

ctx.strokeStyle = "red" 描邊樣式或顏色

ctx.moveTo(x,y) -------- 移動到指定點

ctx.lineTo(x,y) ------- 從當前點到指定點畫直線

ctx.stroke() ------- 對當前路徑描邊

ctx.fill() ------ 對當前路徑填充

在瞭解了上面的一些基本知識之後，現在我們就要開始使用Canvas繪製正多邊形了

<!DOCTYPE HTML>
<html lange=en>
<head>
<meta charset="utf-8"/>
<title> canvas </title>
<style>
#canvas{
	border: 1px #333 solid;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
	如果頁面中能夠看到這些字，那麼您的瀏覽器不支援canvas
</canvas>
<script>
		var canvas = document.getElementById('canvas'); 
		var ctx = canvas.getContext('2d');

		function create(ctx) {
			var dx=100;
			var dy=100;
			ctx.beginPath();
			ctx.strokeStyle = (function(){
                 var r = Math.floor(Math.random()*255);
                 var g = Math.floor(Math.random()*255);
                 var b = Math.floor(Math.random()*255);
                 console.log(r);
                 console.log(g);
                 console.log(b);
                 return `rgb(${r},${g},${b})`;
			})();
			//多邊形內角和公式(n-2)*180
            //則每個外角為(180-(n-2)*180/n)
		    var reg = Math.PI/180*(180-(n-2)*180/n);//(n>=3)
			//var reg = Math.PI / 5*4; 五角星
			for(var i=0;i<=n;i++){
				var x = Math.sin(i*reg);
				var y = Math.cos(i*reg);
				ctx.lineTo(dx+x*100,dy+y*100);
			}
			ctx.closePath();
        }	
        create(ctx);
            ctx.stroke();
			//ctx.fill();			
</script>
</body>
</html>

五角星已經註釋在程式碼中，需要使用什麼圖形，只需要修改n值就可以啦

Canvas繪製正多邊形及五角星

一般常用的繪圖技術有三種：Svg,Canvas和WebGL 在正式使用Canvas繪製多邊形及五角星之前，請允許我向大家簡單的介紹下Canvas繪圖之路徑的基本語法結構 ctx.beginPath() -------- 開始一條新路徑 ctx.closePath() -

HTML Canvas 繪製五角星

效果如圖所示：程式碼如下： <!DOCTYPE html> <html lang="en"> <body> <canvas width="1000" height="1000" id="myCanvas"></ca

Android自定義View【實戰教程】5⃣️---Canvas詳解及程式碼繪製安卓機器人

友情連結：神馬是Canvas 基本概念 Canvas：可以理解為是一個為我們提供了各種工具的畫布，我們可以在上面盡情的繪製（旋轉，平移，縮放等等）。可以理解為系統分配給我們一個一個記憶體空間，然後提供了一些對這個記憶體空間操作的方法(AP

canvas 二 canvas繪製錶盤，及canvas曲線的繪製

/** * 繪製圓 * arc(x,y,半徑,起始弧度，結束弧度,旋轉方向) * x,y起始位置 * 弧度與角度的關係 : 弧度 = 角度*Math.PI/180 * 旋轉方向:順時針(預設false)、逆時針(true) */ var oc = d

canvas 繪製五角星

練習canvas，跟著教材做一個繪製五角星的特效，大家可以複製程式碼在本地檢視效果。分析：五角星有十個定點，五個外頂點，五個內頂點，可以看成頂點分別在兩個圓上，其中假設外頂點所在圓的

canvas 上繪製正多邊形函式

這是我自己通過計算得出的函式，由於我數學沒學好，可能計算過程有點兒複雜，導致程式碼冗長。 -------------------------------------------------------------------------------------------

canvas繪畫時鐘及倒計時時鐘

整數效果圖有時二維 -c 更新時間 enter 程序 etc 因為偶是一個前端小白，所以呢！！！！想要把自己在網上看的代碼，並且自己敲了一遍，做了註釋分享給大家~~~不喜勿噴，謝謝喲！我是super喵二（程序媛），大家一起成長！！！倒計時時鐘（先放效果圖）（好吧我

Canvas對畫布及文字控制基礎API學習

style 也不能不能 pan 平移 spa 畫布 bsp ont 這次純API練習，比較簡單，但是是為了之後的結合項目打基礎的，所以也不能忽視它，下面開始： Canvas的平移、旋轉、縮放 ①、Canvas的平移： ②、Canvas的旋轉： ③、Ca

小程序canvas使用，及一些坑，以及自己的一些小總結

開發背景圖 height java gda 數據利用 let 宋體自己做了一個小程序，主要用於給頭像加圖標的那種，和qq似的，主要用canvas做的，第一回用，掉了很多坑，所以今天系統的總結一下自己所做的，如果大家有不理解的地方，歡迎提問 canvas可以用來畫一

canvas繪製動態電子錶

電子錶線上地址:點選開啟連結電子時鐘截圖動態電子錶實現思路1.利用陣列繪製不規則圖形需要繪製的圖形有 0 1 2 3 4 5 6 7 8 9 : 要繪製的圖形陣列為[0,0,1,1,1,0,0],

OpenCV 繪製正多邊形

OpenCV 繪製正多邊形 #include <iostream> #include <opencv2\core\core.hpp> #include <opencv2\opencv.hpp> #include <open

Canvas繪製圖形

1.Android 利用canvas畫各種圖形(點、直線、弧、圓、橢圓、文字、矩形、多邊形、曲線、圓角矩形) 參考： https://blog.csdn.net/u013831257/article/details/50556098 https://blog.csdn.net/qq_2175

canvas繪製圖形——圓弧與圓形

canvas 繪製圓弧繪製圓弧使用 context.arc( ) 函式，包含六個引數。 context.arc( centerx,centery,radius, startingAngle,endingAngle, anticlockwise = false )

canvas繪製圖形——直線、多邊形、七巧板

前言 canvas 是 html5 中的一個新元素，主要用於圖形的繪製，通過 JavaScript 來控制。<canvas> 標籤定義一個圖形容器，也可以叫做畫布，通過 js 指令碼可以繪製出各種各樣的影象。建立canvas 建立 canvas 只需要新增 canv

js驗證碼實現---使用Canvas繪製一個隨機改變的驗證碼圖片

使用Canvas繪製一個隨機改變的驗證碼圖片,如下圖 var str = 'ABCDEFGHJKLMNPQRSTWXY3456789'; var char = str[ 0~字串長度間的隨機數 ];

android canvas 繪製 Cirle 以外的區域為指定顏色

今天的內容主要是android.graphics.PorterDuff.Mode 有個需求類似： canvas上繪製圓以外的區域為alpha透明度的黑色，圓內區域為透明：實現原理很簡單，就是把整個canvas畫成alpha透明度的黑色， canvas.drawARGB(alp

JS canvas繪製五子棋的棋盤

本文為大家分享了JS canvas繪製五子棋棋盤的具體程式碼，供大家參考，具體內容如下 box-shadow:給元素塊周邊新增陰影效果。語法：box-shadow: h-shadow v-shadow blur spread color inset； h-shadow: （必

測試canvas繪製旋轉文字的效能

　　canvas 繪製各種動畫效果時，我們經常會使用畫布旋轉，使繪製上去的元素有旋轉的效果。　　最近在專案中碰到了很嚴重的效能問題，經常排查發現是因為繪製批量文字時使用了畫布旋轉，且每行文字的旋轉角度是不一樣的，每次繪製前都會去動態的改變畫布上下文context的旋轉角度值，導致CPU佔用太多。　　而

HTML 5 Canvas 繪製圖形影象

HTML5 Canvas HTML5 <canvas> 標籤定義圖形，比如圖表和其他影象，必須使用指令碼來繪製圖形。<canvas> 是 HTML 5 中的新標籤。 <canvas> 元素本身並沒有繪製能力，它僅僅是圖形的容器/畫布，必須使用指令碼(Jav

Android自定義View——canvas 繪製一個會動的時鐘

文章目錄 ####1、功能例項用canvas 繪製一個會動的指標式時鐘 ####2、程式碼架構 ####3、主要功能程式碼 activity_main.xml 檔案 <?xml version="1.0" encodin

Canvas繪製正多邊形及五角星

相關推薦