2015FALL 40423117 CADPA 作業

2015 計算機程式 12/25

複習12/18上的繪圖架構技巧:

12/18 html導入brython 投影片

簡易繪圖程式碼分享

  • 導入 brython.js 
<script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  • 啟動 brython
<script>
window.onload=function(){
brython(1);
}
</script>
  • 建立畫布名稱"plotarea" 尺寸 500 x 510
<canvas id="plotarea" width="500" height="510"></canvas>
  • 簡易盆栽程式碼
ctx.beginPath()
ctx.moveTo(195, 390) # 線條起點
ctx.lineTo(195, 420) # 線條終點
ctx.moveTo(305, 405)
ctx.lineTo(305, 420)
ctx.lineWidth = 8 # 線條的粗細
ctx.strokeStyle = "#381319" # 顏色的選擇 RGB
ctx.stroke()

#底下為畫布滿矩形的圖形
ctx.beginPath()
ctx.fillStyle = "#5C2230" # 填充矩形 顏色的選擇 RGB
ctx.fillRect(160,420,180,30) # (起點X,起點Y,矩形寬,矩形高)
ctx.stroke()

ctx.beginPath()
ctx.fillStyle = "#381319"
ctx.fillRect(200,420,50,30)
ctx.stroke()

ctx.beginPath()
ctx.fillStyle = "#381319"
ctx.fillRect(180,450,10,20)
ctx.stroke()

ctx.beginPath()
ctx.fillStyle = "#5C2230"
ctx.fillRect(190,450,40,20)
ctx.stroke()

ctx.beginPath()
ctx.fillStyle = "#381319"
ctx.fillRect(230,450,50,20)
ctx.stroke()

ctx.beginPath()
ctx.fillStyle = "#5C2230"
ctx.fillRect(280,450,50,20)
ctx.stroke()

ctx.beginPath()
ctx.fillStyle = "#381319"
ctx.fillRect(180,470,30,20)
ctx.stroke()

ctx.beginPath()
ctx.fillStyle = "#5C2230"
ctx.fillRect(210,470,40,20)
ctx.stroke()

ctx.beginPath()
ctx.fillStyle = "#381319"
ctx.fillRect(250,470,50,20)
ctx.stroke()

ctx.beginPath()
ctx.fillStyle = "#5C2230"
ctx.fillRect(300,470,30,20)
ctx.stroke()
  • 簡易的字體程式碼
ctx.beginPath()
ctx.fillStyle = "#88A85D"
ctx.font = "12px ScriptS" # 字體大小 與 字型
ctx.fillText("40423117",390,490) # 字體內容,座標
ctx.stroke()

Merry Christmas

1225 from 40423117 on Vimeo.

期中到期末的複習影片

Review_fix.bat_Python from 40423117 on Vimeo.

Comments