Question

我有一个带有id = canvas的画布，在这个画布上有很多球。我需要为这些球添加一些信息。所以我有一个带有text =“ball1”的球。我需要在这一行下添加一些文字，比如text2 =“我的超级球”。

我也知道球的半径和坐标。

如果我只获得画布和球的ID，我怎么能这样做？

Answer 1

问题：您无法更改已在html5画布上绘制的任何内容

所以... 的

您已获得带有现有文字球图纸的画布，您需要更改其中一个球的文字。

但是...... 的

Html5画布就像一幅真正的壁画。你在画布上画了一个带有“ball1”的红球并把它挂在墙上。你不能以后用“我的超级球”替换它来改变“ball1”文本。

选项＃1：重绘画布上的所有内容

如果画布仅包含填充文本（== context.arc）的球（== context.fillText），则可以使用context.clearRect删除整个画布并重绘文本球用你想要的文字。

选项＃2：仅重绘需要更改文字的球

如果画布包含您不想通过清除画布而破坏的内容，那么您可以通过使用原始颜色重新填充它来覆盖球，然后在重新填充的球内绘制已更改的文本。

以下示例带注释的代码＆amp;显示两种方法的演示：

// canvas vars
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

// create an array of "ball" objects 
// Each object contains sufficient info to redraw a ball
var balls=[
    {x:100,y:100,radius:50,fill:'red',text:'ball1'},
    {x:200,y:100,radius:35,fill:'blue',text:'ball2'},
    {x:300,y:100,radius:25,fill:'green',text:'ball3'},
];

// To start, draw the basic balls
drawAll();

// listen for button clicks
$('#redrawAll').click(function(){
    // toggle the super ball: ball1 <-> super
    var b=balls[0];
    if(b.text=='ball1'){
        b.text='My Super Ball';
    }else{
        b.text='ball1';
    }
    // completely clear the canvas
    ctx.clearRect(0,0,cw,ch);
    // redraw all balls
    drawAll();
});
//
$('#overwriteOne').click(function(){
    // toggle the super ball: ball1 <-> super
    var b=balls[0];
    if(b.text=='ball1'){
        b.text='My Super Ball';
    }else{
        b.text='ball1';
    }
    // over-write just the super ball
    drawTextBall(b.x,b.y,b.radius,b.fill,b.text);
});

function drawAll(){
    // completely clear the canvas
    ctx.clearRect(0,0,cw,ch);
    // redraw all balls from the info in balls[] array
    for(var i=0;i<balls.length;i++){
        var b=balls[i];
        drawTextBall(b.x,b.y,b.radius,b.fill,b.text);
    }
}

function drawTextBall(x,y,radius,fill,text){
    // this function changes some styles so we'll be kind and
    // restore the incoming style when we're done.
    ctx.save();
    // draw a red ball at x,y
    ctx.beginPath();
    ctx.arc(x,y,radius,0,Math.PI*2);
    ctx.closePath();
    ctx.fillStyle=fill;
    ctx.fill();
    // draw text centered at x,y
    ctx.fillStyle='white';
    ctx.textAlign='center';
    ctx.textBaseline='middle';
    ctx.fillText(text,x,y);
    // restore the original incoming styles
    ctx.restore();
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id='redrawAll'>Clear and Redraw all balls</button>
<button id='overwriteOne'>Overwrite just 1 ball</button>
<br>
<canvas id="canvas" width=400 height=200></canvas>

如何编辑Canvas-Objects外观？

1 个答案: