canvas繪制多邊形

阿新 • • 發佈：2017-11-18

col 分布 borde canvas 分享圖片 tel utf-8 pat ()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas繪制多邊形</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid darkcyan;" width="400" height="400"></canvas>

<script>
    var c = document.getElementById("canvas").getContext("2d");
     
//定義一個以（x,y）為中心，半徑為r的規則n邊型；
    //每個頂點都是均勻分布在圓周上
    //將第一個頂點放置在最上面，或者指定一定角度
    //除非最後一個參數是true，否則順時針旋轉
    function polygon(c,n,x,y,r,angle,counterClockwise) {
        angle = angle || 0;
        counterClockwise = counterClockwise || false;
        c.moveTo(x+r*Math.sin(angle),y-r*Math.cos(angle));
         
var delta = 2*Math.PI/n;
        for(var i=1;i<n;i++){
            angle+=counterClockwise?-delta:delta;
            c.lineTo(x+r*Math.sin(angle),y-r*Math.cos(angle));
        }
        c.closePath();
    }
    c.beginPath();
    polygon(c,3,50,70,50);
    polygon(c,4,150,60,50,Math.PI/4);
    polygon(c,5,255,55,50);

    c.fillStyle  
= "#ccc";
    c.strokeStyle = "#008";
    c.lineWidth = 5;
    c.fill();
    c.stroke();
</script>
</body>
</html>

技術分享圖片

canvas繪制多邊形

col 分布 borde canvas 分享圖片 tel utf-8 pat () <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

canvas 繪制圓形進度條

設置字體大小文字 height center body 字體指定位置 str n) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

html5 canvas 繪制五角星

create 瀏覽器 function con 圖像 sep fun context lin html5 中的 canvas 元素使用 javascript 在網頁上繪制圖像，今天就寫一下如何使用 canvas 繪制一個五角星。代碼如下：　　html 代碼 <c

amazeui+canvas繪制二維碼

javascrip cnblogs ext mat 節點 lec ons contex .get <link rel="stylesheet" type="text/css" href="css/amazeui.min.css"/> <s

Android canvas繪制柱形統計圖

ext.get hit 選擇 etc new 工廠模式 imp 設計模式 layout 如今非常多應用都須要一些統計圖。眼下第三方的統計圖也有非常多。可是在自己看來僅僅要不是特別耽誤時間還是選擇用canvas自己繪制比較合理。依賴於第三方的繪制在需求上也

canvas一周一練 -- canvas繪制馬尾圖案（5）

gre doc dom clas ret rect img png com 運行效果： <!DOCTYPE html> <html> <head> </head> <body> <canvas i

canvas 繪制圖形

.html script alpha iam 二次貝塞爾曲線 creat -m 屬性其他什麽是canvas? 　　　<canvas> 元素用於圖形的繪制，通過腳本 (通常是JavaScript)來完成. 　　　<canvas> 標簽只是圖形容器，

HTML5 canvas繪制文本

can light ole init span ntb load log .text demo.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF

canvas 繪制三次貝塞爾曲線

png 繪制 ges nload 代碼 idt head mage src 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

canvas 繪制二次貝塞爾曲線

logs text lineto quad img utf 技術分享 bsp element 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

利用canvas繪制圖形

趨勢增加互聯網所有獲取內部曲線必須需要繪制圖有很多種方法，可以借助flash實現，也可以使用SVG和VML來繪圖。本章將要學習一種新的繪圖方法——使用Canvas元素，它是基於HTML5原生的繪圖功能。使用Canvas元素，可以繪制圖形，也可以實現

用Canvas繪制一個鐘表

es2017 wid 畫布 text ges save 需要 als 分鐘效果圖： <html> <head></head><body> <canvas id="canvas1"height="500px"widt

canvas繪制文本

font ket ddl col ext logs 屬性 phi microsoft 1、繪制文本方法有兩個為：fillText()與strokeText(); 繪制文本方法自帶屬性如以下： font：表示文本樣式、大小及字體； textAlign：表示文本對其方式（‘st

使用高德地圖繪制多邊形區域（轉）

ctype color 點擊 create user ins .com stroke 簡單轉自：http://www.cnblogs.com/mengxingxinqing/p/6087201.html 最近遇到一個需求，在網頁上面編輯多邊形的區域，並且需要能夠判斷一個

Canvas繪制股票K線圖

mat restore screen 位置 mar toc rect() store water 最近想在小程序做股票K線圖，於是嘗試用Canvas實現股票K線圖。K線圖用到Canvas的API其實只有劃線和畫矩形，即moveTo(),lineTo(),fillRect()

第166天：canvas繪制餅狀圖動畫

padding new gree component adding 文本 add function 填充 canvas繪制餅狀圖動畫 1、HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head

canvas 繪制驗證碼

刷新驗證碼 document RR canvas 驗證 div var gin 之前用canvas繪制了八卦圖, 今天用canvas繪制的驗證碼, 很多地方都會用到, 記錄下來 ,以後可以直接用用到的方法矩形　　canvas.getContext(‘2d‘);　　　

（四）canvas繪制路徑

ble 清除需要 max 理解 1.0 寬度 content pda save() 樣式不受汙染的起始範圍 shadowOffsetX 陰影x軸的距離 shadowOffsetY 陰影y軸的

（三）canvas繪制樣式

document ice 連接 scala fff utf-8 技術分享 mar black beginPath() 對畫線點的一個開始限制 moveTo() 畫線的起點，只在開頭使用參數兩個x軸，y軸

canvas繪制愛心

net height sha lin else rand line 圖像 ctype 需求：繪制愛心圖像軌跡。實現：直接貼代碼吧！預覽地址：https://codepen.io/wzc570738205/pen/dqqBpj <!DOCTYPE

canvas繪制多邊形

相關推薦