4

Tenho um canvas na minha página e gostaria de remover a borda.... so que não estou conseguindo... qual propriedade que trabalha com a borda?

           function desenhaBase(canvas, context, x1, y1, x2, y2){
            context.fillStyle = "white";
            context.beginPath();
            context.rect(0, 0, canvas.width, canvas.height);
            context.fill();

            var message = "x";
            context.font = '9pt Arial';
            context.fillStyle = 'black';
            context.fillText(message, 293, 148);
            context.fillRect(0, 149, 300, 1);

            var message = "y";
            context.font = '9pt Arial';
            context.fillStyle = 'black';
            context.fillText(message, 3, 9);
            context.fillRect(1, 0, 1, 150);

            context.fillRect(150, 0, 1, 150);
            context.fillRect(0, 149, 300, 1);

            context.moveTo(x1,y1);
            context.lineTo(x2,y2);
            context.strokeStyle = '#ff0000';
            context.stroke();
        }

Quero construir um plano Cartesiano..

1 Resposta 1

3

A borda é desenhada pela função rect, então basta você usar a função fillRect no primeiro trecho do código.

Além disso, ajustei um pouco seu exemplo para gerar um plano cartesiano centralizado no meio. Veja como ficou:

function desenhaBase(canvas, context, x1, y1, x2, y2) {
    context.fillStyle = "white";
    context.beginPath();
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.fill();
    
    //center
    var xm = (x1 + x2) / 2, ym = (y1 + y2) / 2;
    
    //default formatting
    context.lineWidth = 1;
    context.fillStyle = 'black';
    context.strokeStyle = 'black';
    context.font = '9pt Arial';
    
    //axis labels
    var message = "x";
    context.fillText(message, x2 - 10, ym + 10);
    var message = "y";
    context.fillText(message, xm - 10, y1 + 10);

    //y axis
    context.beginPath();
    context.moveTo(x1, ym);
    context.lineTo(x2, ym);
    context.stroke();
    
    //x axis
    context.beginPath();
    context.moveTo(xm, y2);
    context.lineTo(xm, y1);
    context.stroke();
    
    //f(x) = y 
    context.beginPath();
    context.moveTo(x1, y2);
    context.lineTo(x2, y1);
    context.strokeStyle = '#ff0000';
    context.stroke();
}
var c = document.querySelector('canvas');
var ctx=c.getContext("2d");
desenhaBase(c, ctx, 0, 0, 300, 300);
body {
    background: #ddd;
}
<canvas width="300" height="300"></canvas>

1
  • 1
    Perfeito velho, muitíssimo obrigado 17/12/2014 às 13:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .