Closed mdecourse closed 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
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
-- 導入 "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()
-- 導入 "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()
大家記得要參考一下 https://github.com/mdecourse/cd2018/issues/13#issuecomment-368309110 確實了解如何在 Issues 中輸入程式碼或其他相關資料, 而且按下 Comment 之前, 先用 Preview 檢查一下.
程式碼全部內縮四個 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()
原先的程式碼, 修改如下:
-- 導入 "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)
-- 導入 "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)
-- 導入 "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'
-- 導入 "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)
-- 導入 "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()
-- 導入 "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
-- 導入 "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()
參考資料
https://www.lua.org/pil/1.html
從 print() 開始
大家可以利用 http://mde.tw/vecp2018/lua/SchoolProject/ 練習簡單的 Lua 程式, 接下來練習函式的定義與在瀏覽器中取使用者輸入的用法: