即时通讯试图将图像保存到画布,然后绘制更多。这就是我走得太远了。它吐出我的图像和绘图,但是当我添加文本时删除图像

--

绘制图像

var  tCtx2 = document.getElementById('textCanvas').getContext('2d'),
imageElem = document.getElementById('image');
var tCtx = document.getElementById('textCanvas').getContext('2d'),
imageElem = document.getElementById('image');
var ttyl = document.getElementById('newimg');
tCtx2.drawImage(ttyl,0,0);
imageElem.src = tCtx2.canvas.toDataURL("images/image.png");


开始文字绘图

document.getElementById('text').addEventListener('keyup', function (){

tCtx.globalCompositeOperation="source-over";
var mytxt = document.getElementById('text').value;
var mystr1 = mytxt.substr(0, 31);
var mystr2 = mytxt.substr(31, 31);
var mystr3 = mytxt.substr(62, 31);
var mystr4 = mytxt.substr(93, 31);
tCtx.canvas.width = imageElem.width;
tCtx.fillStyle = '#000000';
tCtx.font = '17pt "Lucida Sans Unicode", "Lucida Grande", sans-serif';
tCtx.fillText(mystr1, 10, 98);
tCtx.fillText(mystr2, 10, 122);
tCtx.fillText(mystr3, 10, 146);
tCtx.fillText(mystr4, 10, 168);


开始一起保存

var copiedImg = new Image();
copiedImg.onload = function(){
tCtx.drawImage(copiedImg, 0, 0);
};

copiedImg.src = imageElem.src;


imageElem.src = tCtx.canvas.toDataURL('image/png')
}, false);

最佳答案

我感觉是这条线:

tCtx.canvas.width = imageElem.width;


here


  通过以下方式为宽度或高度属性分配值时
  JavaScript它具有重置画布的副作用。所以
  与clearRect函数类似,这意味着画布是
  恢复透明。

07-24 09:44
查看更多