search

mdecourse / vecp2018

車輛工程系大一計算機程式 (課程已經結束)
GNU Affero General Public License v3.0
0 stars 0 forks source link

Lua 5.0 程式語言簡介 #7

Closed mdecourse closed 6 years ago

mdecourse commented 6 years ago

參考資料

https://www.lua.org/pil/1.html

從 print() 開始

print("Hello World")

大家可以利用 http://mde.tw/vecp2018/lua/SchoolProject/ 練習簡單的 Lua 程式, 接下來練習函式的定義與在瀏覽器中取使用者輸入的用法:

-- 導入 js 模組
js = require("js")
-- 取得 window
window = js.global

-- defines a factorial function
function fact (n)
  if n == 0 then
    return 1
  else
    return n * fact(n-1)
  end
end

-- 利用 window:prompt 方法回應取得使用者的輸入
a = window:prompt("enter a number:")
print(fact(a))
a40628404 commented 6 years ago 
local ctx = require "js".global.document:getElementById("canvas"):getContext("2d")
ctx.fillStyle = "rgb(255,0,0)"
ctx.strokeStyle = "rgb(0,0,0)"
deg = math.pi / 180
function star(radius, xc, yc, n,cc)
    xi = xc + radius*math.cos((360/n)*deg+cc*deg)
    yi = yc - radius*math.sin((360/n)*deg+cc*deg)
    ctx:beginPath()
    ctx:moveTo(xi,yi)
    for i = 2, n+1 do
        x = xc + radius*math.cos((360/n)*deg*i+cc*deg)
        y = yc - radius*math.sin((360/n)*deg*i+cc*deg)
        ctx:lineTo(x,y)
    end
end
for set = 1 , 12 do
    ctx.strole = "rgb(0,0,0)"
    print(150*math.cos(set*30*deg))
    star(50, 300+150*math.cos(set*30*deg), 300-150*math.sin(set*30*deg), 3 , 90)
    ctx:closePath()
    ctx:fill()
end
local ctx = require "js".global.document:getElementById("canvas"):getContext("2d")
ctx.fillStyle = "rgb(255,0,0)"
ctx.strokeStyle = "rgb(0,0,0)"
deg = math.pi / 180
function star(radius, xc, yc, n,cc)
    xi = xc + radius*math.cos((360/n)*deg+cc*deg)
    yi = yc - radius*math.sin((360/n)*deg+cc*deg)
    ctx:beginPath()
    ctx:moveTo(xi,yi)
    for i = 2, n+1 do
        x = xc + radius*math.cos((360/n)*deg*i+cc*deg)
        y = yc - radius*math.sin((360/n)*deg*i+cc*deg)
        ctx:lineTo(x,y)
    end
end
for set = 1 , 12 do
    ctx.strole = "rgb(0,0,0)"
    print(150*math.cos(set*30*deg))
    star(50, 300+150*math.cos(set*30*deg), 300-150*math.sin(set*30*deg), 3 , 90)
    ctx:closePath()
    ctx:fill()
end
a40628404 commented 6 years ago 
local ctx = require "js".global.document:getElementById("canvas"):getContext("2d")
ctx.fillStyle = "rgb(255,0,0)"
ctx.strokeStyle = "rgb(0,0,0)"
deg = math.pi / 180
function star(radius, xc, yc, n,cc)
    xi = xc + radius*math.cos((360/n)*deg+cc*deg)
    yi = yc - radius*math.sin((360/n)*deg+cc*deg)
    ctx:beginPath()
    ctx:moveTo(xi,yi)
    for i = 2, n+1 do
        x = xc + radius*math.cos((360/n)*deg*i+cc*deg)
        y = yc - radius*math.sin((360/n)*deg*i+cc*deg)
        ctx:lineTo(x,y)
    end
end
for set = 1 , 12 do
    ctx.strole = "rgb(0,0,0)"
    local s = 50
    star(s, 300+3.7*s*math.cos(set*30*deg), 300-3.7*s*math.sin(set*30*deg), 3 ,30*set)
    ctx:closePath()
    ctx:fill()
end
40628411 commented 6 years ago 
-- 導入 "js" 模組
local js = require "js"
-- global 就是 javascript 的 window
local global = js.global
local document = global.document
-- html 檔案中 canvas　id 設為 "canvas"
local canvas = document:getElementById("canvas")
-- 將 ctx 設為 canvas 2d 繪圖畫布變數
local ctx = canvas:getContext("2d")

-- 屬性呼叫使用 . 而方法呼叫使用 :
-- 設定填圖顏色
ctx.fillStyle = "rgb(0,0,150)"
-- 設定畫筆顏色
ctx.strokeStyle = "rgb(0,0,150)"

-- 乘上 deg 可轉為徑度單位
deg = math.pi / 180

-- 建立多邊形定點位置畫線函式
function star(radius, xc, yc, n)
    --radius = 100
    --xc = 200
    --yc = 200
    xi = xc + radius*math.cos((360/n)*deg+0*deg)
    yi = yc - radius*math.sin((360/n)*deg+0*deg)
    ctx:beginPath()
    ctx:moveTo(xi,yi)
    for i = 2, n+1 do
        x = xc + radius*math.cos((360/n)*deg*i+0*deg)
        y = yc - radius*math.sin((360/n)*deg*i+0*deg)
        ctx:lineTo(x,y)
    end
end
star(100, 200, 200,6)
ctx:closePath()
ctx:stroke()
ctx:fill()

star(60, 200, 200,6)
ctx:closePath()
ctx:stroke()
ctx.fillStyle = '#fff'
ctx:fill()

star(38, 200, 200,1000)
ctx:closePath()
ctx:stroke()
ctx.fillStyle = "rgb(0,0,150)"
ctx:fill()
--藍色六邊形
star(150, 200, 27,6)
ctx:closePath()
ctx.fillStyle = '#fff'
ctx:fill()
ctx.strokeStyle = '#fff'

star(15, 200, 200,4)
ctx:closePath()
ctx.fillStyle =  '#fff'
ctx:fill()

star(15, 190, 190,4)
ctx:closePath()
ctx.fillStyle =  '#fff'
ctx:fill()

star(15, 180, 180,4)
ctx:closePath()
ctx.fillStyle =  '#fff'
ctx:fill()

star(15, 210, 210,4)
ctx:closePath()
ctx.fillStyle =  '#fff'
ctx:fill()

star(15, 220, 220,4)
ctx:closePath()
ctx.fillStyle =  '#fff'
ctx:fill()
40628418 commented 6 years ago

-- 導入 "js" 模組 local js = require "js" -- global 就是 javascript 的 window local global = js.global local document = global.document -- html 檔案中 canvas　id 設為 "canvas" local canvas = document:getElementById("canvas") -- 將 ctx 設為 canvas 2d 繪圖畫布變數 local ctx = canvas:getContext("2d")

-- 屬性呼叫使用 . 而方法呼叫使用 : -- 設定填圖顏色 ctx.fillStyle = "rgb(0,0,150)" -- 設定畫筆顏色 ctx.strokeStyle = "rgb(0,0,150)"

-- 乘上 deg 可轉為徑度單位 deg = math.pi / 180

-- 建立多邊形定點位置畫線函式 function star(radius, xc, yc, n) --radius = 100 --xc = 200 --yc = 200 xi = xc + radiusmath.cos((360/n)deg+0deg) yi = yc - radiusmath.sin((360/n)deg+0deg) ctx:beginPath() ctx:moveTo(xi,yi) for i = 2, n+1 do x = xc + radiusmath.cos((360/n)degi+0deg) y = yc - radiusmath.sin((360/n)degi+0deg) ctx:lineTo(x,y) end end star(100, 200, 200,6) ctx:closePath() ctx:stroke() ctx:fill()

star(60, 200, 200,6) ctx:closePath() ctx:stroke() ctx.fillStyle = '#fff' ctx:fill()

star(38, 200, 200,1000) ctx:closePath() ctx:stroke() ctx.fillStyle = "rgb(0,0,150)" ctx:fill() --藍色六邊形 star(150, 200, 27,6) ctx:closePath() ctx.fillStyle = '#fff' ctx:fill() ctx.strokeStyle = '#fff'

star(15, 200, 200,4) ctx:closePath() ctx.fillStyle = '#fff' ctx:fill()

star(15, 190, 190,4) ctx:closePath() ctx.fillStyle = '#fff' ctx:fill()

star(15, 180, 180,4) ctx:closePath() ctx.fillStyle = '#fff' ctx:fill()

star(15, 210, 210,4) ctx:closePath() ctx.fillStyle = '#fff' ctx:fill()

star(15, 220, 220,4) ctx:closePath() ctx.fillStyle = '#fff' ctx:fill()

mdecourse commented 6 years ago

如何在 Issues 輸入資料

大家記得要參考一下 https://github.com/mdecourse/cd2018/issues/13#issuecomment-368309110 確實了解如何在 Issues 中輸入程式碼或其他相關資料, 而且按下 Comment 之前, 先用 Preview 檢查一下.

40628428 commented 6 years ago

程式碼全部內縮四個 spaces 後:

-- 導入 "js" 模組
local js = require "js"
-- global 就是 javascript 的 window
local global = js.global
local document = global.document
-- html 檔案中 canvas　id 設為 "canvas"
local canvas = document:getElementById("canvas")
-- 將 ctx 設為 canvas 2d 繪圖畫布變數
local ctx = canvas:getContext("2d")

-- 屬性呼叫使用 . 而方法呼叫使用 :
-- 設定填圖顏色
ctx.fillStyle = "rgb(0,0,100)"
-- 設定畫筆顏色
ctx.strokeStyle = "rgb(0,0,200)"

-- 乘上 deg 可轉為徑度單位
deg = math.pi / 180

-- 建立多邊形定點位置畫線函式
function star(radius, xc, yc, n)
    --radius = 100
    --xc = 200
    --yc = 200
    xi = xc + radius*math.cos((360/n)*deg+180*deg)
    yi = yc - radius*math.sin((360/n)*deg+180*deg)
    ctx:beginPath()
    ctx:moveTo(xi,yi)
    for i = 2, n+1 do
        x = xc + radius*math.cos((360/n)*deg*i+180*deg)
        y = yc - radius*math.sin((360/n)*deg*i+180*deg)
        ctx:lineTo(x,y)
    end
end

-- 以下利用多邊形畫線函式呼叫執行畫框線或填入顏色
-- 畫外面六邊形框線
ctx.fillStyle= '#191970'
star(135, 200, 200, 6)
ctx:closePath()
ctx:fill()
--劃裡面白色六邊型
ctx.fillStyle = '#fff'
star(90, 200, 200, 6)
ctx:closePath()
ctx:fill()
-- 以下採用 canvas 原始座標繪圖
flag_w = 600
flag_h = 400
circle_x = flag_w/4
circle_y = flag_h/4

--上方空白
ctx.fillStyle= '#fff'
ctx:fillRect(0, 0, flag_w/2, flag_h/3)

--中間圓
ctx.fillStyle= '#191970'
star(40, 200, 200, 40)
ctx:closePath()
ctx:fill()

--中間白色
ctx.fillStyle= '#fff'
star(15, 180, 180, 4)
ctx:closePath()
ctx:fill()
--中間白色
ctx.fillStyle= '#fff'
star(15, 190, 190, 4)
ctx:closePath()
ctx:fill()
--中間白色
ctx.fillStyle= '#fff'
star(15, 200, 200, 4)
ctx:closePath()
ctx:fill()
--中間白色
ctx.fillStyle= '#fff'
star(15, 210, 210, 4)
ctx:closePath()
ctx:fill()
--中間白色
ctx.fillStyle= '#fff'
star(15, 220, 220, 4)
ctx:closePath()
ctx:fill()

--中間白色
ctx.fillStyle= '#fff'
star(15, 170, 170, 4)
ctx:closePath()
ctx:fill()

--中間白色
ctx.fillStyle= '#fff'
star(15, 230, 230, 4)
ctx:closePath()
ctx:fill()
40628427 commented 6 years ago

請注意, 要正確在此輸入程式碼, 必須先將程式碼複製到 Sci.exe 編輯器, 全選後按下 Tab, 讓所有程式碼都內縮 4 個 spaces 後, 再複製到 Issues 編輯區, 以 Preview Tab 檢視後, 確定沒有問題, 再 Comment.

原先的程式碼, 修改如下:

-- 導入 "js" 模組
local js = require "js"
-- global 就是 javascript 的 window
local global = js.global
local document = global.document
-- html 檔案中 canvas　id 設為 "canvas"
local canvas = document:getElementById("canvas")
-- 將 ctx 設為 canvas 2d 繪圖畫布變數
local ctx = canvas:getContext("2d")

-- 屬性呼叫使用 . 而方法呼叫使用 :
-- 設定填圖顏色
ctx.fillStyle = "rgb(200,0,0)"
-- 設定畫筆顏色
-- 導入 "js" 模組
local js = require "js"
-- global 就是 javascript 的 window
local global = js.global
local document = global.document
-- html 檔案中 canvas　id 設為 "canvas"
local canvas = document:getElementById("canvas")
-- 將 ctx 設為 canvas 2d 繪圖畫布變數
local ctx = canvas:getContext("2d")

-- 乘上 deg 可轉為徑度單位
deg = math.pi / 180

-- 建立多邊形定點位置畫線函式
function star(radius, xc, yc, n, fs, ss, fors)
    radius = radius or 50
    xc = xc or 100
    yc = yc or 100
    n = n or 5
    -- 屬性呼叫使用 . 而方法呼叫使用 :

-- 畫筆顏色屬性
    ss = ss or "rgb(0,0,200)"
    -- 內定為填色
    fors = fors or "fill"
    aa=aa or 0
    ctx.fillStyle = fs
    ctx.strokeStyle = ss
    xi = xc + radius*math.cos((360/n)*deg+(90+aa)*deg)
    yi = yc - radius*math.sin((360/n)*deg+(90+aa)*deg)
    ctx:beginPath()
    ctx:moveTo(xi,yi)
    for i = 2, n+1 do
        x = xc + radius*math.cos((360/n)*deg*i+(90+aa)*deg)
        y = yc - radius*math.sin((360/n)*deg*i+(90+aa)*deg)
        ctx:lineTo(x,y)
    end
    ctx:closePath()
    if fors == "fill" then
        ctx:fill()
    else
        ctx:stroke()
    end
end
star(200, 300, 300,6, "rgb(0,77,153)", "rgb(100,100,0)", "fill",-90)
star(130, 300, 300,6, "rgb(255,255,255)", "rgb(100,100,0)", "fill",-90)
star(210, 300, 60,4, "rgb(255,255,255)", "rgb(100,100,0)", "fill",45)
star(60, 300, 300,36, "rgb(0,77,153)", "rgb(100,100,0)", "fill",45)
star(20, 300, 300,4, "rgb(999,999,999)", "rgb(100,100,0)", "fill",85)
star(20,320,320,4, "rgb(999,999,999)", "rgb(100,100,0)", "fill",85)
star(20,335,335,4, "rgb(999,999,999)", "rgb(100,100,0)", "fill",85)
star(20, 285, 285,4, "rgb(999,999,999)", "rgb(100,100,0)", "fill",85)
star(20, 265, 265,4, "rgb(999,999,999)", "rgb(100,100,0)", "fill",85)
40628410 commented 6 years ago 
    -- 導入 "js" 模組
    local js = require "js"
    -- global 就是 javascript 的 window
    local global = js.global
    local document = global.document
    -- html 檔案中 canvas　id 設為 "canvas"
    local canvas = document:getElementById("canvas")
    -- 將 ctx 設為 canvas 2d 繪圖畫布變數
    local ctx = canvas:getContext("2d")

    -- 乘上 deg 可轉為徑度單位
    deg = math.pi / 180

    -- 建立多邊形定點位置畫線函式
    function star(radius, xc, yc, n, fs, ss, fors,aa)
        radius = radius or 50
        xc = xc or 100
        yc = yc or 100
        n = n or 5
        -- 屬性呼叫使用 . 而方法呼叫使用 :
        -- 填色屬性
        fs = fs or "rgb(200,0,0)"
        -- 畫筆顏色屬性
        ss = ss or "rgb(0,0,200)"
        -- 內定為填色
        fors = fors or "fill"
        aa=aa or 0
        ctx.fillStyle = fs
        ctx.strokeStyle = ss
        xi = xc + radius*math.cos((360/n)*deg+(90+aa)*deg)
        yi = yc - radius*math.sin((360/n)*deg+(90+aa)*deg)
        ctx:beginPath()
        ctx:moveTo(xi,yi)
        for i = 2, n+1 do
            x = xc + radius*math.cos((360/n)*deg*i+(90+aa)*deg)
            y = yc - radius*math.sin((360/n)*deg*i+(90+aa)*deg)
            ctx:lineTo(x,y)
        end
        ctx:closePath()
        if fors == "fill" then
            ctx:fill()
        else
            ctx:stroke()
        end
    end

    star(200, 300, 300, 6, "rgb(0,77,153)", "rgb(100,100,0)", "fill",-90)
    star(130, 300, 300, 6, "rgb(255,255,255)", "rgb(100,100,0)", "fill",-90)
    star(210, 300, 60, 4, "rgb(255,255,255)", "rgb(100,100,0)", "fill",45)
    star(70, 299, 300, 36, "rgb(0,77,153)", "rgb(100,100,0)", "fill" ,45)
    star(30, 293, 287, 4, "rgb(255,255,255)", "rgb(100,100,0)", "fill",85)
    star(30, 319, 318, 4, "rgb(255,255,255)", "rgb(100,100,0)", "fill",85)
    star(30, 334, 336, 4, "rgb(255,255,255)", "rgb(100,100,0)", "fill",85)
    star(30, 266, 255, 4, "rgb(255,255,255)", "rgb(100,100,0)", "fill",85)
40628414 commented 6 years ago

-- 導入 "js" 模組 local js = require "js" -- global 就是 javascript 的 window local global = js.global local document = global.document -- html 檔案中 canvas　id 設為 "canvas" local canvas = document:getElementById("canvas") -- 將 ctx 設為 canvas 2d 繪圖畫布變數 local ctx = canvas:getContext("2d")

-- 屬性呼叫使用 . 而方法呼叫使用 : -- 設定填圖顏色 ctx.fillStyle = "rgb(200,0,0)" -- 設定畫筆顏色 ctx.strokeStyle = "rgb(0,0,200)"

-- 乘上 deg 可轉為徑度單位 deg = math.pi / 180

-- 建立多邊形定點位置畫線函式 function star(radius, xc, yc, n) --radius = 100 --xc = 200 --yc = 200 xi = xc + radiusmath.cos((360/n)deg) yi = yc - radiusmath.sin((360/n)deg) ctx:beginPath() ctx:moveTo(xi,yi) for i = 2, n+1 do x = xc + radiusmath.cos((360/n)degi) y = yc - radiusmath.sin((360/n)degi) ctx:lineTo(x,y) end end

-- 以下利用多邊形畫線函式呼叫執行畫框線或填入顏色 -- 畫五邊形框線 star(100, 200, 200, 6) ctx:closePath() ctx:stroke()

-- 填色設為藍色 ctx.fillStyle = 'rgb(0, 0, 149)' ctx:fill()

--中間五邊形 star(65, 200, 200, 6) ctx:closePath() ctx:stroke()

--填色設為白色 ctx.fillStyle = '#fff' ctx:fill()

--中間圓形
star(30, 200, 200, 30) ctx:closePath() ctx:stroke()

--填色設為藍色 ctx.fillStyle = 'rgb(0, 0, 149)' ctx:fill()

--中間白色長方形 star(15, 200, 200,4) ctx:closePath() ctx.fillStyle = '#fff' ctx:fill()

--中間白色長方形 star(15, 190, 190,4) ctx:closePath() ctx.fillStyle = '#fff' ctx:fill()

--中間白色長方形 star(15, 180, 180,4) ctx:closePath() ctx.fillStyle = '#fff' ctx:fill()

--中間白色長方形 star(15, 210, 210,4) ctx:closePath() ctx.fillStyle = '#fff' ctx:fill()

--中間白色長方形 star(15, 220, 220,4) ctx:closePath() ctx.fillStyle = '#fff' ctx:fill()

--上方空白 star(150, 200, 27,6) ctx:closePath() ctx.fillStyle = '#fff' ctx:fill() ctx.strokeStyle = '#fff'

40628402 commented 6 years ago

-- 導入 "js" 模組 local js = require "js" -- global 就是 javascript 的 window local global = js.global local document = global.document -- html 檔案中 canvas　id 設為 "canvas" local canvas = document:getElementById("canvas") -- 將 ctx 設為 canvas 2d 繪圖畫布變數 local ctx = canvas:getContext("2d")

-- 乘上 deg 可轉為徑度單位
deg = math.pi / 180

-- 建立多邊形定點位置畫線函式
function star(radius, xc, yc, n, fs, ss, fors,aa)
    radius = radius or 50
    xc = xc or 100
    yc = yc or 100
    n = n or 5
    -- 屬性呼叫使用 . 而方法呼叫使用 :
    -- 填色屬性
    fs = fs or "rgb(200,0,0)"
    -- 畫筆顏色屬性
    ss = ss or "rgb(0,0,200)"
    -- 內定為填色
    fors = fors or "fill"
    aa=aa or 0
    ctx.fillStyle = fs
    ctx.strokeStyle = ss
    xi = xc + radius*math.cos((360/n)*deg+(90+aa)*deg)
    yi = yc - radius*math.sin((360/n)*deg+(90+aa)*deg)
    ctx:beginPath()
    ctx:moveTo(xi,yi)
    for i = 2, n+1 do
        x = xc + radius*math.cos((360/n)*deg*i+(90+aa)*deg)
        y = yc - radius*math.sin((360/n)*deg*i+(90+aa)*deg)
        ctx:lineTo(x,y)
    end
    ctx:closePath()
    if fors == "fill" then
        ctx:fill()
    else
        ctx:stroke()
    end
end

star(210, 300, 300, 6, "rgb(0,77,153)", "rgb(100,100,0)", "fill",-90)
star(140, 300, 300, 6, "rgb(255,255,255)", "rgb(100,100,0)", "fill",-90)
star(220, 300, 60, 4, "rgb(255,255,255)", "rgb(100,100,0)", "fill",45)
star(70, 299, 300, 36, "rgb(0,77,153)", "rgb(100,100,0)", "fill" ,45)
star(30, 293, 287, 4, "rgb(255,255,255)", "rgb(100,100,0)", "fill",85)
star(30, 319, 318, 4, "rgb(255,255,255)", "rgb(100,100,0)", "fill",85)
star(30, 334, 336, 4, "rgb(255,255,255)", "rgb(100,100,0)", "fill",85)
star(30, 266, 255, 4, "rgb(255,255,255)", "rgb(100,100,0)", "fill",85)
40628434 commented 6 years ago

-- 導入 "js" 模組 local js = require "js" -- global 就是 javascript 的 window local global = js.global local document = global.document -- html 檔案中 canvas　id 設為 "canvas" local canvas = document:getElementById("canvas") -- 將 ctx 設為 canvas 2d 繪圖畫布變數 local ctx = canvas:getContext("2d")

-- 屬性呼叫使用 . 而方法呼叫使用 :
-- 設定填圖顏色
ctx.fillStyle = "rgb(200,0,0)"
-- 設定畫筆顏色
ctx.strokeStyle = "rgb(0,0,200)"

-- 乘上 deg 可轉為徑度單位
deg = math.pi / 180

-- 建立多邊形定點位置畫線函式
function star(radius, xc, yc, n)
    --radius = 100
    --xc = 200
    --yc = 200
    xi = xc + radius*math.cos((360/n)*deg+360*deg)
    yi = yc - radius*math.sin((360/n)*deg+360*deg)
    ctx:beginPath()
    ctx:moveTo(xi,yi)
    for i = 2, n+1 do
        x = xc + radius*math.cos((360/n)*deg*i+360*deg)
        y = yc - radius*math.sin((360/n)*deg*i+360*deg)
        ctx:lineTo(x,y)
    end
end

-- 以下利用多邊形畫線函式呼叫執行畫框線或填入顏色
-- 畫五邊形框線
ctx.fillStyle= '#191970'
star(200, 300, 200, 6) 
ctx:closePath()
ctx:fill()

--裡面白色六邊型
ctx.fillStyle = '#fff'
star(120, 300, 200, 6)
ctx:closePath()
ctx:fill()

--中間圓
ctx.fillStyle= '#191970'
star(50, 300, 200, 40)
ctx:closePath()
ctx:fill()

--中間白色
ctx.fillStyle= '#fff'
star(20, 270, 170, 4)
ctx:closePath()
ctx:fill()

--中間白色
ctx.fillStyle= '#fff'
star(20, 280, 180, 4)
ctx:closePath()
ctx:fill()

--中間白色
ctx.fillStyle= '#fff'
star(20, 290, 190, 4)
ctx:closePath()
ctx:fill()

--中間白色
ctx.fillStyle= '#fff'
star(20, 300, 200, 4)
ctx:closePath()
ctx:fill()

--中間白色
ctx.fillStyle= '#fff'
star(20, 310, 210, 4)
ctx:closePath()
ctx:fill()

--中間白色
ctx.fillStyle= '#fff'
star(20, 320, 220, 4)
ctx:closePath()
ctx:fill()

--中間白色
ctx.fillStyle= '#fff'
star(20, 330, 230, 4)
ctx:closePath()
ctx:fill()

--中間長方形

ctx.fillStyle= '#fff'
star(90, 200, 20, 6)
ctx:closePath()
ctx:fill()

ctx.fillStyle= '#fff'
star(90, 290, 20, 6)
ctx:closePath()
ctx:fill()

ctx.fillStyle= '#fff'
star(90, 380, 20, 6)
ctx:closePath()
ctx:fill()

ctx.fillStyle= '#fff'
star(90, 400, 20, 6)
ctx:closePath()
ctx:fill()
40628434 commented 6 years ago

-- 導入 "js" 模組 local js = require "js" -- global 就是 javascript 的 window local global = js.global local document = global.document -- html 檔案中 canvas　id 設為 "canvas" -- 準備繪圖畫布 local canvas = document:getElementById("canvas") -- 將 ctx 設為 canvas 2d 繪圖畫布變數 local ctx = canvas:getContext("2d")

-- 以下採用 canvas 原始座標繪圖
flag_w = 1000
flag_h = 400
circle_x = flag_w/4
circle_y = flag_h/4

-- 先畫紅圖
ctx.fillStyle='rgb(255, 0, 0)'
ctx:fillRect(0, 0, flag_w, flag_h)

-- 再畫藍圖
ctx.fillStyle='rgb(0, 0, 150)'
ctx:fillRect(0, 0, flag_w/3.5, flag_h/2)

--白色條紋
ctx.fillStyle='rgb(1000, 1000, 1000)'
ctx:fillRect(0,200, flag_w/5, flag_h/13)

ctx.fillStyle='rgb(1000, 1000, 1000)'
ctx:fillRect(200,200, flag_w/5, flag_h/13)

ctx.fillStyle='rgb(1000, 1000, 1000)'
ctx:fillRect(400,200, flag_w/5, flag_h/13)

ctx.fillStyle='rgb(1000, 1000, 1000)'
ctx:fillRect(0,200, flag_w/5, flag_h/13)

ctx.fillStyle='rgb(1000, 1000, 1000)'
ctx:fillRect(286,140, flag_w/5, flag_h/13)

ctx.fillStyle='rgb(1000, 1000, 1000)'
ctx:fillRect(400,140, flag_w/5, flag_h/13)

ctx.fillStyle='rgb(1000, 1000, 1000)'
ctx:fillRect(400,85, flag_w/5, flag_h/13)

ctx.fillStyle='rgb(1000, 1000, 1000)'
ctx:fillRect(286,85, flag_w/5, flag_h/13)

ctx.fillStyle='rgb(1000, 1000, 1000)'
ctx:fillRect(286,30, flag_w/5, flag_h/13)

ctx.fillStyle='rgb(1000, 1000, 1000)'
ctx:fillRect(400,30, flag_w/5, flag_h/13)

ctx.fillStyle='rgb(1000, 1000, 1000)'
ctx:fillRect(400,30, flag_w/5, flag_h/13)

ctx.fillStyle='rgb(1000, 1000, 1000)'
ctx:fillRect(0,265, flag_w/5, flag_h/13)

ctx.fillStyle='rgb(1000, 1000, 1000)'
ctx:fillRect(200,265, flag_w/5, flag_h/13)

ctx.fillStyle='rgb(1000, 1000, 1000)'
ctx:fillRect(400,265, flag_w/5, flag_h/13)

ctx.fillStyle='rgb(1000, 1000, 1000)'
ctx:fillRect(0,325, flag_w/5, flag_h/13)

ctx.fillStyle='rgb(1000, 1000, 1000)'
ctx:fillRect(200,325, flag_w/5, flag_h/13)

ctx.fillStyle='rgb(1000, 1000, 1000)'
ctx:fillRect(400,325, flag_w/5, flag_h/13)

-- x, y 為中心,  r 為半徑, angle 旋轉角,  solid 空心或實心,  color 顏色
function star(x, y, r, angle, solid, color)
    angle = angle or 0
    solid = solid or false
    color = color or "#f00"
    -- 以 x, y 為圓心, 計算五個外點
    local deg = math.pi/180
    -- 圓心到水平線距離
    local a = r*math.cos(72*deg)
    -- a 頂點向右到內點距離
    local b = (r*math.cos(72*deg)/math.cos(45*deg))*math.sin(36*deg)
    -- 利用畢氏定理求內點半徑
    rin = math.sqrt(a*a + b*b)
    -- 查驗 a, b 與 rin
    --print(a, b, rin)
    if (solid) then
        ctx:beginPath()
    end
    for i = 0, 4 do
        xout = (x + r*math.sin((360/5)*deg*i+180*deg))
        yout = (y + r*math.cos((360/5)*deg*i+180*deg))
        -- 外點增量 + 1
        xout2 = x + r*math.sin((360/5)*deg*(i+1)+180*deg)
        yout2 = y + r*math.cos((360/5)*deg*(i+1)+180*deg)
        xin = x + rin*math.sin((360/5)*deg*i+36*deg+180*deg)
        yin = y + rin*math.cos((360/5)*deg*i+36*deg+180*deg)
        -- 查驗外點與內點座標
        --print(xout, yout, xin, yin)
        if (solid) then
            -- 填色
            if (i==0) then
                ctx:moveTo(xout, yout)
                ctx:lineTo(xin, yin)
                ctx:lineTo(xout2, yout2)
            else
                ctx:lineTo(xin, yin)
                ctx:lineTo(xout2, yout2)
            end
        else
            -- 空心
            draw_line(xout, yout, xin, yin, color)
            -- 畫空心五芒星, 無關畫線次序, 若實心則與畫線次序有關
            draw_line(xout2, yout2, xin, yin, color)
        end
    end

    if (solid) then
        ctx.fillStyle = color
        ctx:fill()
    end
end

--第一排星星
for i = 0, 5 do
    for j = 0, 0 do
        star(15+50*i, 18+50*j, 10, 0, true, "#f0")

    end
end

--第二排星星
for i = 0, 4 do
    for j = 0, 0 do
        star(40+50*i, 40+50*j, 10, 0, true, "#f0")

    end
end

--第三排星星
for i = 0, 5 do
    for j = 0, 0 do
        star(15+50*i, 60+50*j, 10, 0, true, "#f0")

    end
end

--第四排星星
for i = 0, 4 do
    for j = 0, 0 do
        star(40+50*i, 80+50*j, 10, 0, true, "#f0")

    end
end

--第五排星星
for i = 0, 5 do
    for j = 0, 0 do
        star(15+50*i, 100+50*j, 10, 0, true, "#f0")

    end
end

--第六排星星    
for i = 0, 4 do
    for j = 0, 0 do
        star(40+50*i, 120+50*j, 10, 0, true, "#f0")

    end
end

--第七排星星
for i = 0, 5 do
    for j = 0, 0 do
        star(15+50*i, 140+50*j, 10, 0, true, "#f0")

    end
end

--第八排星星
for i = 0, 4 do
    for j = 0, 0 do
        star(40+50*i, 160+50*j, 10, 0, true, "#f0")

    end
end

--第九排星星
for i = 0, 5 do
    for j = 0, 0 do
        star(15+50*i, 180+50*j, 10, 0, true, "#f0")

    end
end
40628435 commented 6 years ago

-- 導入 "js" 模組 local js = require "js" -- global 就是 javascript 的 window local global = js.global local document = global.document -- html 檔案中 canvas　id 設為 "canvas" local canvas = document:getElementById("canvas") -- 將 ctx 設為 canvas 2d 繪圖畫布變數 local ctx = canvas:getContext("2d")

-- 屬性呼叫使用 . 而方法呼叫使用 : -- 設定填圖顏色 ctx.fillStyle = "rgb(0,0,200)" -- 設定畫筆顏色 ctx.strokeStyle = "rgb(0,0,200)"

-- 乘上 deg 可轉為徑度單位 deg = math.pi / 180

-- 建立多邊形定點位置畫線函式 function star(radius, xc, yc, n,aa) --radius = 100 --xc = 200 --yc = 200 xi = xc + radiusmath.cos((360/n)deg+(0+aa)deg) yi = yc - radiusmath.sin((360/n)deg+(0+aa)deg) ctx:beginPath() ctx:moveTo(xi,yi) for i = 2, n+1 do x = xc + radiusmath.cos((360/n)degi+(0+aa)deg) y = yc - radiusmath.sin((360/n)degi+(0+aa)deg) ctx:lineTo(x,y) end end

-- 以下利用多邊形畫線函式呼叫執行畫框線或填入顏色 -- 畫六邊形框線 ctx.fillStyle = "rgb(0,0,200)" star(100, 300, 300, 6,0) ctx:closePath() ctx:fill()

ctx.fillStyle = "rgb(255,255,255)" star(60, 300, 300, 6,0) ctx:closePath() ctx:fill()

ctx.fillStyle = "rgb(0,0,200)" star(25, 300, 300, 30,0) ctx:closePath() ctx:fill()

ctx.fillStyle = "rgb(255,255,255)" star(12, 300, 300, 4,0) ctx:closePath() ctx:fill()

ctx.fillStyle = "rgb(255,255,255)" star(12, 290, 290, 4,0) ctx:closePath() ctx:fill()

ctx.fillStyle = "rgb(255,255,255)" star(12, 280, 280, 4,0) ctx:closePath() ctx:fill()

ctx.fillStyle = "rgb(255,255,255)" star(12, 310, 310, 4,0) ctx:closePath() ctx:fill()

ctx.fillStyle = "rgb(255,255,255)" star(12, 320, 320, 4,0) ctx:closePath() ctx:fill()

ctx.fillStyle = "rgb(255,255,255)" star(60, 345, 220, 4,45) ctx:closePath() ctx:fill()

ctx.fillStyle = "rgb(255,255,255)" star(60, 265, 220, 4,45) ctx:closePath() ctx:fill()

ctx.fillStyle = "rgb(255,255,255)" star(60, 220, 220, 4,45) ctx:closePath() ctx:fill()