Multiple Image Canvas Example

[boxgaming]

This example demonstrates how the DomGetImage method can be utilized to place multiple image canvases on the page.

View in QBJS

Dim Shared c, ccount, speed, cimg
Dim i

InitControls

Do
    Cls , 15
    For i = 1 To ccount.value
        Circle (Rnd * 620, Rnd * 380), 5 + Rnd * 50, 1 + Rnd * 14
    Next i
    _Limit speed.value
Loop

Color 0, 15
Locate 13, 36
Print "Game Over"

Sub OnAddSquare
    Dim x, y, size
    x = Rnd * 180
    y = Rnd * 80
    size = 5 + Rnd * 50
    _Dest cimg
    Line (x, y)-(x+size, y+size), Rnd * 14, B
    _Dest 0
End Sub

Sub InitControls
    Dim main, container
    main = DomGetImage(0)
    main.style.border = "1px solid #ccc"
    container = DomContainer
    container.style.overflow = "scroll"
    container.style.textAlign = "left"
    container.style.backgroundColor = "#fff"
    
    c = DomCreate("div")
    c.style.padding = "20px"
    c.style.color = "#333"
    
    DomCreate "div", c, "This is the main screen canvas:"
    DomAdd main, c
    DomCreate "br", c
    
    DomCreate "span", c, "Circles: "
    ccount = DomCreate("input", c)
    ccount.type = "range"
    ccount.min = 1
    ccount.max = 300
    ccount.style.width = "250px"
    ccount.style.verticalAlign = "middle"
    
    Dim s
    s = DomCreate("span", c, "Speed: ")
    s.style.marginLeft = "20px"
    speed = DomCreate("input", c)
    speed.type = "range"
    speed.style.verticalAlign = "middle"
    speed.style.width = "250px"  
    speed.min = 1
    speed.max = 60
    speed.value = 10

    DomCreate "br", c
    DomCreate "br", c
    DomCreate "div", c, "This is a second image:"
    cimg = _NewImage(200, 100)
    Dim dimg
    dimg = DomGetImage(cimg)
    dimg.style.border = "1px solid #ccc"
    dimg.style.backgroundColor = "#efefef"
    dimg.style.marginBottom = "5px"
    DomAdd dimg, c
    DomCreate "br", c
    Dim btn
    btn = DomCreate("button", c, "Add Square")
    btn.onclick = sub_OnAddSquare
End Sub

[boxgaming]

This example is a bit obsolete at this point. The Dom methods have now been moved into their own module. An up-to-date version can be found on the Samples page.