English : Português

Descrição : Código : Exemplo : Ajuda : Ranque

Desenha linhas e arcos usando javascript.
Criado: 2005.08.08

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/dhtml/graphical-plotter [rev. #1]

Canvas = function(){
    var o = this;
    (o.penPos = {x: 0, y: 0}, o.pixelSize = 10, o.pen = {style: "solid",
        size: 1, color: "#000"}, o.brush = {style: "solid", color: "#000"});
};
with({p: Canvas.prototype}){
    p.pixel = function(x, y, color) {
        var o = this, s = document.body.appendChild(document.createElement("div")).style;
        return (s.position = "absolute", s.width = (o.pen.size * o.pixelSize) + "px",
            s.height = (o.pen.size * o.pixelSize) + "px", s.fontSize = "1px",
            s.left = (x * o.pixelSize) + "px", s.top = (y * o.pixelSize) + "px",
            s.backgroundColor = color || o.pen.color, o);
    };
    p.line = function(x1, y1, x2, y2){
        if(Math.abs(x1 - x2) < Math.abs(y1 - y2))
            for(y = Math.min(y1, y2) - 1, x = Math.max(y1, y2); ++y <= x;
                this.pixel((y * (x1 - x2) - x1 * y2 + y1 * x2) / (y1 - y2), y));
        else
            for(x = Math.min(x1, x2) - 1, y = Math.max(x1, x2); ++x <= y;
                this.pixel(x, (x * (y1 - y2) - y1 * x2 + x1 * y2) / (x1 - x2)));
        return this;
    };
    p.arc = function(x, y, raio, startAngle, degrees) {
        for(degrees += startAngle; degrees --> startAngle;
            this.pixel(Math.cos(degrees * Math.PI / 180) * raio + x,
                Math.sin(degrees * Math.PI / 180) * raio + y)); return this;
    };
    p.rectangle = function(x, y, width, height, rotation){
        return this.moveTo(x, y).lineBy(0, height).lineBy(width, 0).lineBy(0, -height).lineBy(-width, 0);
    };
    p.moveTo = function(x, y){var o = this; return (o.penPos.x = x, o.penPos.y = y, o);};
    p.moveBy = function(x, y){var o = this; return o.moveTo(o.penPos.x + x, o.penPos.y + y);};
    p.lineTo = function(x, y){var o = this; return o.line(o.penPos.x, o.penPos.y, x, y).moveTo(x, y);};
    p.lineBy = function(x, y){var o = this; return o.lineTo(o.penPos.x + x, o.penPos.y + y);};
    p.curveTo = function(cx, cy, x, y){};
    p.polyBezier = function(points){};
    p.path = function(points){};
}

<script type="text/javascript">
//<![CDATA[

canvas = new Canvas;

canvas.pen.color = "#f00";
canvas.rectangle(30, 20, 20, 20);
canvas.pen.color = "#080";
canvas.rectangle(35, 25, 10, 10);
canvas.pen.color = "#008";
canvas.arc(50, 30, 10, 180, 270);
canvas.arc(30, 30, 10, 0, 270);
canvas.pen.color = "#ff0";

//]]>
</script>

Construtor

Canvas(void)

Gera uma instância de Canvas.

Propriedades

Canvas.penPos.x: Integer

Posição "x" atual da caneta

Canvas.penPos.y: Integer

Posição "y" atual da caneta

Canvas.pen.style: String

Estilo da caneta (deve ser setado usando os valores do border-style do css "dashed", "solid", ...)

Canvas.pen.size: Integer

Grossura da caneta

Canvas.pen.color: String

Cor da caneta

Canvas.pixelSize: Integer

Tamanho imaginário do pixel na tela

Canvas.brush.*

Não suportado

Métodos

Canvas.pixel(x: Integer, y: Integer): Canvas

Desenha um pixel na posição (x,y) e retorna o próprio canvas.

Canvas.moveTo(x: Integer, y: Integer): Canvas

Move a caneta para a posição (x,y) e retorna o próprio canvas.

Canvas.moveBy(x: Integer, y: Integer): Canvas

Move a caneta para a posição (penPos.x + x, penPos.y + y ) e retorna o próprio canvas.

Canvas.lineTo(x: Integer, y: Integer): Canvas

Desenha uma linha de (penPos.x, penPos.y) até (x,y) e retorna o próprio canvas.

Canvas.lineBy(x: Integer, y: Integer): Canvas

Desenha uma linha de (penPos.x, penPos.y) até (penPos.x + x, penPos.y + y ) e retorna o próprio canvas.

Canvas.line(x1: Integer, y1: Integer, x2: Integer, y2: Integer): Canvas

Desenha uma linha de (x1,y1) até (x2,y2) e retorna o próprio canvas.

Canvas.arc(x: Integer, y: Integer, raio: Integer, startAngle: Integer, degrees: Integer): Canvas

Desenha um arco começando no ângulo "startAngle" até o ângulo "startAngle" + "degrees" com centro em (x,y) e de raio "raio" e retorna o próprio canvas.

Canvas.rectangle(x: Integer, y: Integer, width: Integer, height: Integer, rotation: Integer): Canvas

Desenha um quadro com origem em (x,y), largura "width" e altura "height" (rotation não é suportado) e retorna o próprio canvas.

Canvas.curveTo(cx: Integer, cy: Integer, x: Integer, y: Integer): Canvas

Não suportado.

Canvas.polyBezier(points: Array): Canvas

Não suportado.

Canvas.path(points: Array): Canvas

Não suportado.

0 1 2 3 4 5