Brython 與 Fengari-web 都可以透過 scripting 的方式在網際繪圖, 前者使用 Python3 語法, 而後者使用 Lua 程式語法, Brython 目前的 brython-dist.js 高達 3.7 MB, 而 fengari-web.js 只需要 233 KB.
http://lab.kmol.info/blog/brython-programming-environment.html 說明如何使用 Brython 進行與機械設計領域相關的網際繪圖, 在此, 則希望利用 Lua 進行相同效果的網際程式設計.
由於本網際內容管理程式使用 Tinymce4 網際編輯器套件, 因此為了讓 CMSimfly 編輯器中可以輸入 script 與 canvas 等網際繪圖相關的 html 標註, 必須要修改相關設定:
首先必須將原先使用的 xhtml 格式, 改為 html, 以避開為了滿足 xhtml 格式的 CDATA 註解資料.
接下來則需開啟 script 與 canvas 標註的輸入, 不至於被 Tinymce4 濾除, 其中 canvas 的開放, 需要使用 valid_elements 設定, 以開啟所有標註達成, 而 script 則利用 extended_valid_elements 設定完成.
修改上述設定後, 便可直接在 CMSimfly 編輯器中, 直接輸入各種與 fengari-web 相關的網際 Lua 程式設計內容.
以下允許所有的 html 標註, 並且可以利用 lua 進行網際繪圖:
valid_elements : '*[*]', extended_valid_elements: "script[language|type|src]",
以下則使用一般 Lua 程式繪圖:
<canvas id="canvas" width="600" height="400"></canvas>
<p>
<script type="application/lua">
-- 導入 "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+90*deg)
yi = yc - radius*math.sin((360/n)*deg+90*deg)
ctx:beginPath()
ctx:moveTo(xi,yi)
for i = 2, n+1 do
x = xc + radius*math.cos((360/n)*deg*i+90*deg)
y = yc - radius*math.sin((360/n)*deg*i+90*deg)
ctx:lineTo(x,y)
end
end
-- 以下利用多邊形畫線函式呼叫執行畫框線或填入顏色
-- 畫五邊形框線
star(100, 200, 200, 5)
ctx:closePath()
ctx:stroke()
-- 填三角形色塊
star(50, 350, 200, 3)
ctx:closePath()
ctx:fill()
-- 改變畫線顏色後, 畫七邊形框線
ctx.strokeStyle = "rgb(0,200,20)"
star(50, 450, 200, 7)
ctx:closePath()
ctx:stroke()
</script>
以下則使用 Lua 的物件導向程式設計繪圖:
<canvas id="canvas1" width="600" height="400"></canvas>
<script type="application/lua">
-- 導入 "js" 模組
local js = require "js"
-- global 就是 javascript 的 window
local global = js.global
local document = global.document
-- html 檔案中 canvas id 設為 "canvas"
local canvas = document:getElementById("canvas1")
-- 將 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
-- 建立多邊形定點位置畫線函式
local star = {}
star.__index = star
function star.new(radius, xc, yc, n, sof)
--radius = 100
--xc = 200
--yc = 200
local self = setmetatable({}, star)
self.radius = radius
self.xc = xc
self.yc = yc
self.n = n
-- stroke or fill
self.sof = sof
--return self
--end
--function star.plot(self)
xi = self.xc + self.radius*math.cos((360/self.n)*deg+90*deg)
yi = self.yc - self.radius*math.sin((360/self.n)*deg+90*deg)
ctx:beginPath()
ctx:moveTo(xi,yi)
for i = 2, self.n+1 do
x = self.xc + self.radius*math.cos((360/self.n)*deg*i+90*deg)
y = self.yc - self.radius*math.sin((360/self.n)*deg*i+90*deg)
ctx:lineTo(x,y)
end
ctx:closePath()
if self.sof == true then
ctx:stroke()
else
ctx:fill()
end
end
-- 以下利用多邊形畫線函式呼叫執行畫框線或填入顏色
-- 畫五邊形框線
star1 = star.new(100, 200, 200, 5, true)
--star1:plot()
-- 填三角形色塊
star2 = star.new(50, 350, 200, 3, false)
--star2:plot()
-- 改變畫線顏色後, 畫七邊形框線
ctx.strokeStyle = "rgb(0,200,20)"
star3 = star.new(50, 450, 200, 7, true)
--star3:plot()
</script>