2012年12月26日 星期三

[ Forth.js ] HTML5 Canvas變形的中文程式碼

HTML5繪製圖形的中文程式碼,以下範例,參考自Mozilla開發者社群Canvas 教學

稍等一下

nil

指定畫布 畫布壹
畫布壹 0 0  150 150 實心方
畫布壹 保存畫布狀態

畫布壹 字" #0090F0" 填色調
畫布壹 15 15 120 120 實心方

畫布壹 保存畫布狀態
畫布壹 字" #F0F0F0" 填色調
畫布壹 0.5 透明   
畫布壹 30 30 90 90 實心方

畫布壹 回復畫布狀態
畫布壹 45 45 60 60 實心方

畫布壹 回復畫布狀態
畫布壹 60 60 30 30 實心方
稍等一下

nil

指定畫布 畫布貳

: 繪製螺旋 { 大半徑 小半徑 圓心 } 
  畫布貳 開始構圖
  畫布貳 大半徑 圓心 減 0 移筆  
  2000 1 做 
    區域變數 x2 區域變數 y2
    畫布貳 
    大半徑 小半徑 加 i 180度 72 除 乘 餘弦 乘   
       小半徑 圓心 加 大半徑 小半徑 加 小半徑 除 i 180度 72 除 乘 乘 餘弦 乘 減 
    給 x2 x2
    大半徑 小半徑 加 i 180度 72 除 乘 正弦 乘   
       小半徑 圓心 加 大半徑 小半徑 加 小半徑 除 i 180度 72 除 乘 乘 正弦 乘 減 
    給 y2 y2
    拉線 
    x2  大半徑 圓心 減 不等於  y2 0 不等於 且 否定   
    若真  跳出循環 然後 
  循環 
  畫布貳 下筆   
;  

: 畫九個螺旋
  畫布貳 0 0 300 300 實心方 
  3 0 做
    3 0 做
      畫布貳 保存畫布狀態
      畫布貳 字" #9CFF00" 筆色調
      畫布貳 50 i 100 乘 加 50 j 100 乘 加  移動原點
      20 i 2 加 i 1 加 除 乘  ( 參數 大半徑 )
      -8 j 3 加 j 1 加 除 乘  ( 參數 小半徑 )
      10                     ( 參數 圓心 )
      繪製螺旋
      畫布貳 回復畫布狀態
    循環
  循環
; 畫九個螺旋 
稍等一下

nil

指定畫布 畫布叁
畫布叁 75 75 移動原點

: 旋轉範例
6 1 做
	畫布叁 保存畫布狀態
	畫布叁 51 i 乘 255 51 i 乘 減 255 紅綠藍轉十六進制 填色調
	i 6 乘 0 做
		畫布叁 360度 j 6 乘 除 旋轉
		畫布叁 開始構圖
		畫布叁 0 j 12.5 乘 5 0 360度 反時鐘 弧
		畫布叁 填圖
	循環
	畫布壹 回復畫布狀態
循環

; 旋轉範例

沒有留言:

張貼留言