Question

我想在我的画布上添加多个文本，只需单击一个按钮，但是当我再次单击该按钮时，它会重新加载画布，并且在此处再次加载我的第一个文本是我的代码....有没有更好的方法做到了。???

function text()
{

var m,n;
m=150;
n=60;
var tex=document.getElementById("tex");
var tex1=document.getElementById("tex1");


var te=tex.value;
var te1=tex1.value;



var canvas=new fabric.Canvas('can');    

var text=new fabric.Text( te ,{

top: m,
left: n

});

canvas.add(text);
}

function text2()
{

var m,n;
m=150;
n=60;

var tex1=document.getElementById("tex1");



var te1=tex1.value;



var canvas=new fabric.Canvas('can');    


var text1=new fabric.Text( te1 ,{

top: m,
left: n

});
canvas.add(text1);
}

Answer 1

最后我知道了我不知道我在哪里弄错了但最后这段代码对我有用但是仍然可以告诉我我的错误

<script>
$(document).ready(function(e) {

     var can=new fabric.Canvas('can');
    $("#d").click(function(e) {


       rect=new fabric.Text('New Text',{
        top:Math.floor(Math.random()*350+1),
        left:Math.floor(Math.random()*250+1),
         fill:'red'


        });
    can.add(rect);
    });
});

</script>
<body>
<canvas id="can" width="700" height="500" style=" border:0.2em solid #000;" > </canvas>




<div class="controls"> 


   <button id="d" onclick="text()">ADD TEXT</button>
</div>

fabric.js使用按钮单击添加多个文本

1 个答案: