Skip to content

Instantly share code, notes, and snippets.

@joakin
Last active September 15, 2018 16:53
Show Gist options
  • Save joakin/4852892f6d2c6c229a544a3e2aa8372e to your computer and use it in GitHub Desktop.
Save joakin/4852892f6d2c6c229a544a3e2aa8372e to your computer and use it in GitHub Desktop.
Elm canvas api examples
view ( count, fps ) =
Canvas.toHtml
( w, h )
[ Attributes.style "border" "2px solid red" ]
[ shapes [ rect ( 0, 0 ) w h ] |> fill Color.white
, shapes
[ rect ( -100, -150 ) 40 50
, circle ( 100, 100 ) 80
]
|> lineWidth 5
|> transform [ translate (w / 2) (h / 2), rotate (degrees (sin (count / 100) * 360)) ]
|> fill Color.red
|> stroke Color.green
, text ( w - 50, 50 ) ("fps: " ++ String.fromInt (floor fps))
|> align Right
|> size 30
|> family "sans-serif"
|> lineWidth 1
|> stroke Color.blue
|> fill Color.green
, shapes
[ moveTo ( 20, 10 )
, lineTo ( 10, 30 )
, lineTo ( 30, 30 )
, lineTo ( 20, 10 )
, circle ( 50, 50 ) 10
]
, shapes
(List.range 0 10
|> List.map
(\i ->
(if modBy 2 i == 0 then
arc
else
arcC
)
( toFloat i * 40 + 40, 0 )
20
(degrees -45)
(degrees 45)
)
)
|> fill Color.lightPurple
|> transform [ translate 10 400 ]
]
view ( count, fps ) =
Canvas.toHtml
( w, h )
[ Attributes.style "border" "2px solid red" ]
[ shapes [ fill Color.white ] [ rect ( 0, 0 ) w h ]
, shapes
[ lineWidth 5
, transform
[ translate (w / 2) (h / 2)
, rotate (degrees (sin (count / 100) * 360)) ]
, fill Color.red
, stroke Color.green
, rect ( -100, -150 ) 40 50
]
[ rect ( -100, -150 ) 40 50
, circle ( 100, 100 ) 80
]
, text
[ align Right
, size 30
, family "sans-serif"
, lineWidth 1
, stroke Color.blue
, fill Color.green
]
( w - 50, 50 ) ("fps: " ++ String.fromInt (floor fps))
, shapes []
[ moveTo ( 20, 10 )
, lineTo ( 10, 30 )
, lineTo ( 30, 30 )
, lineTo ( 20, 10 )
, circle ( 50, 50 ) 10
]
, shapes
[ fill Color.lightPurple
, transform [ translate 10 400 ]
]
(List.range 0 10
|> List.map
(\i ->
(if modBy 2 i == 0 then
arc
else
arcC
)
( toFloat i * 40 + 40, 0 )
20
(degrees -45)
(degrees 45)
)
)
]
module Main exposing (view, withDefaultStyle, withTextStyle)
defaultStyles =
[ lineWidth 2
, fill Color.white
, stroke Color.black
]
textStyle =
[ align Right
, size 30
, family "sans-serif"
]
view ( count, fps ) =
Canvas.toHtml
( w, h )
[ Attributes.style "border" "2px solid red" ]
[ shapes [ rect ( 0, 0 ) w h ] |> fill Color.white
, shapes
(transform [ translate (w / 2) (h / 2), rotate (degrees (sin (count / 100) * 360)) ]
++ defaultStyles
)
[ rect ( -100, -150 ) 40 50
, circle ( 100, 100 ) 80
]
, text
(textStyle
++ defaultStyles
)
( w - 50, 50 )
("fps: " ++ String.fromInt (floor fps))
]
module Main exposing (view, withDefaultStyle, withTextStyle)
withDefaultStyle square =
square
|> lineWidth 2
|> fill Color.white
|> stroke Color.black
withTextStyle txt =
txt
|> align Right
|> size 30
|> family "sans-serif"
view ( count, fps ) =
Canvas.toHtml
( w, h )
[ Attributes.style "border" "2px solid red" ]
[ shapes [ rect ( 0, 0 ) w h ] |> fill Color.white
, shapes
[ rect ( -100, -150 ) 40 50
, circle ( 100, 100 ) 80
]
|> withDefaultStyle
|> transform [ translate (w / 2) (h / 2), rotate (degrees (sin (count / 100) * 360)) ]
, text ( w - 50, 50 ) ("fps: " ++ String.fromInt (floor fps))
|> withTextStyle
|> withDefaultStyle
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment