48 lines
1.1 KiB
48 lines
1.1 KiB
Demo.Func = BI.inherit(BI.Widget, { |
|
props: { |
|
baseCls: "demo-func" |
|
}, |
|
render: function () { |
|
|
|
var canvas = BI.createWidget({ |
|
type: "bi.canvas", |
|
width: 500, |
|
height: 600 |
|
}); |
|
canvas.rect(0, 0, 80, 100, "#7dbd2f"); |
|
|
|
canvas.line(80, 0, 100, 100, 200, 100, 300, 0, { |
|
strokeStyle: "red", |
|
lineWidth: 2 |
|
}); |
|
|
|
canvas.circle(150, 50, 20, "green"); |
|
|
|
// 渐变矩形 |
|
canvas.rect(0, 120, 80, 100, canvas.gradient(0, 120, 80, 220, "#FF0000", "#00FF00")); |
|
|
|
// 空心图形 |
|
canvas.hollow(100, 120, 100, 220, 200, 120, { |
|
strokeStyle: "blue" |
|
}); |
|
|
|
// 实心图形 |
|
canvas.solid(100, 240, 200, 240, 150, 280, 200, 320, 100, 320, { |
|
strokeStyle: "yellow", |
|
fillStyle: "pink" |
|
}); |
|
|
|
canvas.stroke(); |
|
|
|
BI.createWidget({ |
|
type: "bi.absolute", |
|
element: this, |
|
items: [{ |
|
el: canvas, |
|
left: 100, |
|
top: 50 |
|
}] |
|
}); |
|
} |
|
}); |
|
BI.shortcut("demo.canvas", Demo.Func); |