2016kmol 測試

在 Plican 靜態網頁系統中,Title 若使用中文, 而且不指定 Slug 的情況下, 系統會將中文字逐一轉為英文拼音來建立網誌檔案.

以下利用 Brython 語法, 在網頁中繪圖:

使用方法: http://www.brython.info/

Brython canvas 繪圖程式碼:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!-- 導入 brython_dist.js -->

<script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>

<!-- 啟動 brython() -->

<script>
window.onload=function(){
brython(1);
}
</script>

<!-- 以下利用 Brython 程式執行繪圖 -->

<canvas id="plotarea" width="300" height="200"></canvas>

<script type="text/python3">
# 導入 doc
from browser import document as doc
import math

# 準備繪圖畫布
canvas = doc["plotarea"]
ctx = canvas.getContext("2d")
# 進行座標轉換, x 軸不變, y 軸反向且移動 canvas.height 單位光點
# ctx.setTransform(1, 0, 0, -1, 0, canvas.height)
# 以下採用 canvas 原始座標繪圖
flag_w = canvas.width
flag_h = canvas.height
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/2,flag_h/2)
# 畫十二道光芒白日
ctx.beginPath()
star_radius = flag_w/8
angle = 0
for i in range(24):
    angle += 5*math.pi*2/12
    toX = circle_x + math.cos(angle)*star_radius
    toY = circle_y + math.sin(angle)*star_radius
    # 只有 i 為 0 時移動到 toX, toY, 其餘都進行 lineTo
    if (i):
        ctx.lineTo(toX, toY)
    else:
        ctx.moveTo(toX, toY)
ctx.closePath()
# 將填色設為白色
ctx.fillStyle = '#fff'
ctx.fill()
# 白日:藍圈
ctx.beginPath()
ctx.arc(circle_x, circle_y, flag_w*17/240, 0, math.pi*2, True)
ctx.closePath()
# 填色設為藍色
ctx.fillStyle = 'rgb(0, 0, 149)'
ctx.fill()
# 白日:白心
ctx.beginPath()
ctx.arc(circle_x, circle_y, flag_w/16, 0, math.pi*2, True)
ctx.closePath()
# 填色設為白色
ctx.fillStyle = '#fff'
ctx.fill()
</script>


其他的 Brython 程式範例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
from browser import html, doc
# use plotarea as canvas
canvas = doc["background_canvas"]
# 準備在 canvas 中繪圖
def draw_line(x1, y1, x2, y2, color="red"):
    ctx.beginPath()
    ctx.moveTo(x1, y1)
    ctx.lineTo(x2, y2)
    ctx.strokeStyle = color
    ctx.stroke()

ctx = canvas.getContext('2d')
size = 30
for i in range(size+1):
    # 水平線
    draw_line(100, 100+i*10, 100+size*10, 100+i*10, "black")
    # 垂直線
    draw_line(100+i*10, 100, 100+i*10, 100+size*10, "red")



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
from browser import html, doc
# use plotarea as canvas
canvas = doc["background_canvas"]
# 準備在 canvas 中繪圖
def draw_line(x1, y1, x2, y2, color="red"):
    ctx.beginPath()
    ctx.moveTo(x1, y1)
    ctx.lineTo(x2, y2)
    ctx.strokeStyle = color
    ctx.stroke()
def fill_rectangle(x1, y1, x2, y2, color="red"):
    ctx.beginPath()
    ctx.moveTo(x1, y1)
    ctx.lineTo(x1, y2)
    ctx.lineTo(x2, y2)
    ctx.lineTo(x2, y1)
    ctx.lineTo(x1, y1)
    ctx.fillStyle = color
    ctx.fill()

ctx = canvas.getContext('2d')
size = 30
for i in range(size+1):
    # 水平線
    draw_line(100, 100+i*10, 100+size*10, 100+i*10, "black")
    # 垂直線
    draw_line(100+i*10, 100, 100+i*10, 100+size*10, "red")
fill_rectangle(0, 0, 100, 100)



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import math
from browser import html, doc
# use plotarea as canvas
canvas = doc["background_canvas"]
# 準備在 canvas 中繪圖
def draw_line(x1, y1, x2, y2, color="red"):
    ctx.beginPath()
    ctx.moveTo(x1, y1)
    ctx.lineTo(x2, y2)
    ctx.strokeStyle = color
    ctx.stroke()
# x, y 為中心,  r 為半徑, angle 旋轉角,  solid 空心或實心,  color 顏色
def star(x, y, r, angle=0, solid=False, color="#f00"):
    # 以 x, y 為圓心, 計算五個外點
    deg = math.pi/180
    # 圓心到水平線距離
    a = r*math.cos(72*deg)
    # a 頂點向右到內點距離
    b = (r*math.cos(72*deg)/math.cos(36*deg))*math.sin(36*deg)
    # 利用畢氏定理求內點半徑
    rin = math.sqrt(a**2 + b**2)
    # 查驗 a, b 與 rin
    #print(a, b, rin)
    if(solid):
        ctx.beginPath()
    for i in range(5):
        xout = (x + r*math.sin((360/5)*deg*i+angle*deg))
        yout = (y + r*math.cos((360/5)*deg*i+angle*deg))
        # 外點增量 + 1
        xout2 = x + r*math.sin((360/5)*deg*(i+1)+angle*deg)
        yout2 = y + r*math.cos((360/5)*deg*(i+1)+angle*deg)
        xin = x + rin*math.sin((360/5)*deg*i+36*deg+angle*deg)
        yin = y + rin*math.cos((360/5)*deg*i+36*deg+angle*deg)
        # 查驗外點與內點座標
        #print(xout, yout, xin, yin)
        if(solid):
            # 填色
            if(i==0):
                ctx.moveTo(xout, yout)
                ctx.lineTo(xin, yin)
                ctx.lineTo(xout2, yout2)
            else:
                ctx.lineTo(xin, yin)
                ctx.lineTo(xout2, yout2)
        else:
            # 空心
            draw_line(xout, yout, xin, yin, color)
            # 畫空心五芒星, 無關畫線次序, 若實心則與畫線次序有關
            draw_line(xout2, yout2, xin, yin, color)
    if(solid):
        ctx.fillStyle = color
        ctx.fill()

ctx = canvas.getContext('2d')
'''
size = 30
for i in range(size+1):
    # 水平線
    draw_line(100, 100+i*10, 100+size*10, 100+i*10, "black")
    # 垂直線
    draw_line(100+i*10, 100, 100+i*10, 100+size*10, "red")
'''
star(100, 100, 30, 0, True, "#f00")
#star(300, 300, 50, 0, False, "#000")
for i in range(5):
    for j in range(5):
        star(200+65*i, 200+65*j, 30, 0, False, "#000")



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import math
from browser import doc
import browser.timer

def draw_circle(x, y, r, linethick=1, color="black"):
    global ctx
    ctx.beginPath()
    ctx.lineWidth = linethick
    ctx.arc(x, y, r, 0, math.pi*2, true)
    ctx.closePath()
    ctx.strokeStyle = color
    ctx.stroke()

def draw():
    global theta, ctx, canvas, x, y, r, dx, dy
    # clear canvas context
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    # draw circle
    draw_circle(x, y, 10)
    # calculate new x, y position
    theta = theta + dx
    x = 200 + r*math.cos(theta*math.pi/180)
    y = 200 - r*math.sin(2*theta*math.pi/180)


x, y, r = 200, 200, 50
# define canvas and context
canvas = doc["background_canvas"]
ctx = canvas.getContext("2d")
# fourbar linkage inputs
theta = 0
degree = math.pi/180
dx = 2
dy = 4

browser.timer.set_interval(draw, 10)



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import math
from browser import html, doc
# use plotarea as canvas
canvas = doc["background_canvas"]
# 準備在 canvas 中繪圖
def draw_line(x1, y1, x2, y2, color="red"):
    ctx.beginPath()
    ctx.moveTo(x1, y1)
    ctx.lineTo(x2, y2)
    ctx.strokeStyle = color
    ctx.stroke()
# x, y 為中心,  r 為半徑, angle 旋轉角,  solid 空心或實心,  color 顏色
def star(x, y, r, angle=0, solid=False, color="#f00"):
    # 以 x, y 為圓心, 計算五個外點
    deg = math.pi/180
    # 圓心到水平線距離
    a = r*math.cos(72*deg)
    # a 頂點向右到內點距離
    b = (r*math.cos(72*deg)/math.cos(36*deg))*math.sin(36*deg)
    # 利用畢氏定理求內點半徑
    rin = math.sqrt(a**2 + b**2)
    # 查驗 a, b 與 rin
    #print(a, b, rin)
    if(solid):
        ctx.beginPath()
    for i in range(5):
        xout = (x + r*math.sin((360/5)*deg*i+angle*deg))
        yout = (y + r*math.cos((360/5)*deg*i+angle*deg))
        # 外點增量 + 1
        xout2 = x + r*math.sin((360/5)*deg*(i+1)+angle*deg)
        yout2 = y + r*math.cos((360/5)*deg*(i+1)+angle*deg)
        xin = x + rin*math.sin((360/5)*deg*i+36*deg+angle*deg)
        yin = y + rin*math.cos((360/5)*deg*i+36*deg+angle*deg)
        # 查驗外點與內點座標
        #print(xout, yout, xin, yin)
        if(solid):
            # 填色
            if(i==0):
                ctx.moveTo(xout, yout)
                ctx.lineTo(xin, yin)
                ctx.lineTo(xout2, yout2)
            else:
                ctx.lineTo(xin, yin)
                ctx.lineTo(xout2, yout2)
        else:
            # 空心
            draw_line(xout, yout, xin, yin, color)
            # 畫空心五芒星, 無關畫線次序, 若實心則與畫線次序有關
            draw_line(xout2, yout2, xin, yin, color)
    if(solid):
        ctx.fillStyle = color
        ctx.fill()

ctx = canvas.getContext('2d')
'''
size = 30
for i in range(size+1):
    # 水平線
    draw_line(100, 100+i*10, 100+size*10, 100+i*10, "black")
    # 垂直線
    draw_line(100+i*10, 100, 100+i*10, 100+size*10, "red")
'''
star(100, 100, 30, 0, True, "#f00")
#star(300, 300, 50, 0, False, "#000")
for i in range(5):
    for j in range(5):
        star(200+65*i, 200+65*j, 30, 0, False, "#000")

dataURL = canvas.toDataURL()
doc['canvas_image'].src = dataURL

Comments

comments powered by Disqus