El objeto texto solo funciona en navegadores que soporten el API de texto.
Para agregar estilo se usan atributos con nombres iguales a los usados en css:
- fontStyle
- fontWeight
- fontSize
- fontFamily
ce = Cevent("canvas");
/****************
* Texto Normal *
*****************/
ce.text(50, 50, "Normal").attr({
fill: "red",
fontSize: 25
});
/****************
* Texto rotado *
****************/
ce.text(0, 0, "Rotado", 1).translate(150, 75)
.rotate(45)
.attr({
fill: "green",
fontSize: 30
});
/*******************
* Arrastrar texto *
*******************/
ce.text(350, 100, "Arrastrar").attr({
fontFamily: "Monospace",
fontWeight: "Bold",
fontSize: 40
}).drag();
/*****************
* Crear un link *
*****************/
ce.text(150, 50, "http://github.com/sney2002")
.attr({
fill: "blue",
fontSize: 20
})
// enviar a abrir pagina al dar click
.click(function(){
open("http://github.com/sney2002");
})
// efecto rollover
.bind("mouseover mouseout", function(c, e) {
this.fill = this.fill == "black" ? "blue" : "black";
// cambiar el estilo del cursor
c.cv.style.cursor = c.cv.style.cursor == "pointer" ? "default" : "pointer";
});
// Dibujar todo
ce.draw();