無法更改HTML 5畫布背景

即時通訊使用此腳本來創建畫布，我可以在該畫布上繪畫，然後將所有圖片保存在一起。：無法更改HTML 5畫布背景

<script type="text/javascript" src="processing.js"></script> 
<script type="text/javascript"> 

/* @pjs preload="/example.jpg"; */ 

bg = loadImage("example.jpg"); 




var canvas, ctx, flag = false, 
    prevX = 0, 
    currX = 0, 
    prevY = 0, 
    currY = 0, 
    dot_flag = false; 

var x = "black", 
    y = 2; 

function init() { 
    canvas = document.getElementById('can'); 
    ctx = canvas.getContext("2d"); 
    w = canvas.width; 
    h = canvas.height; 

    canvas.addEventListener("mousemove", function (e) { 
     findxy('move', e) 
    }, false); 
    canvas.addEventListener("mousedown", function (e) { 
     findxy('down', e) 
    }, false); 
    canvas.addEventListener("mouseup", function (e) { 
     findxy('up', e) 
    }, false); 
    canvas.addEventListener("mouseout", function (e) { 
     findxy('out', e) 
    }, false); 
} 

function color(obj) { 
    switch (obj.id) { 
     case "green": 
      x = "green"; 
      break; 
     case "blue": 
      x = "blue"; 
      break; 
     case "red": 
      x = "red"; 
      break; 
     case "yellow": 
      x = "yellow"; 
      break; 
     case "orange": 
      x = "orange"; 
      break; 
     case "black": 
      x = "black"; 
      break; 
     case "white": 
      x = "white"; 
      break; 
    } 
    if (x == "white") y = 14; 
    else y = 2; 

} 

function draw() { 
    ctx.beginPath(); 
    ctx.moveTo(prevX, prevY); 
    ctx.lineTo(currX, currY); 
    ctx.strokeStyle = x; 
    ctx.lineWidth = y; 
    ctx.stroke(); 
    ctx.closePath(); 
} 

function erase() { 
    var m = confirm("Want to clear"); 
    if (m) { 
     ctx.clearRect(0, 0, w, h); 
     document.getElementById("canvasimg").style.display = "none"; 
    } 
} 

function save() { 
    document.getElementById("canvasimg").style.border = "2px solid"; 
    var dataURL = canvas.toDataURL(); 
    document.getElementById("canvasimg").src = dataURL; 
    document.getElementById("canvasimg").style.display = "inline"; 
} 

function findxy(res, e) { 
    if (res == 'down') { 
     prevX = currX; 
     prevY = currY; 
     currX = e.clientX - canvas.offsetLeft; 
     currY = e.clientY - canvas.offsetTop; 

     flag = true; 
     dot_flag = true; 
     if (dot_flag) { 
      ctx.beginPath(); 
      ctx.fillStyle = x; 
      ctx.fillRect(currX, currY, 2, 2); 
      ctx.closePath(); 
      dot_flag = false; 
     } 
    } 
    if (res == 'up' || res == "out") { 
     flag = false; 
    } 
    if (res == 'move') { 
     if (flag) { 
      prevX = currX; 
      prevY = currY; 
      currX = e.clientX - canvas.offsetLeft; 
      currY = e.clientY - canvas.offsetTop; 
      draw(); 
     } 
    } 
} 
</script>

但我的背景保持全白，並沒有改變。當我打開這個網站時，它說：「loadImage未定義」。任何幫助將非常令人滿意。

來源

2014-03-26 user3465096

除了必須編寫loadImage函數之外，您還必須在加載後應用背景。我沒有看到這發生在任何地方。 – enhzflep

抱歉在嘗試編輯時意外刪除了我以前的評論。 loadImage不是HTML5畫布中的默認方法。你必須先定義它，然後才能使用它。 –

@ q2liu對不起，我對此有點新，請問我該如何定義它？ – user3465096

首先確保你在你的HTML文件中定義一個canvas並定義畫布的大小：

<canvas id="myCanvas" width="500" height="500"></canvas>

因此，而不是在你的JavaScript定義畫布，它更容易在HTML和搶來定義它它在你的Javascript中。

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d');

上下文是你做所有繪圖的地方。現在，你可以（在所有的或不使用的方法，如果你只加載一個圖像）定義的LoadImage：

function loadImage(imageSrc, x, y) { 
    var image = new Image(); 
    image.src = imageSrc; 
    image.onload = function() { 
     context.drawImage(image, x, y); 
    } 
}

然後，您可以調用該函數在頁面加載時。

Live Demo Here

如果您複製並粘貼下面的代碼，你應該得到一個工作演示（然而，似乎是儲蓄和結算等問題，你應該尋找解決）：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>HTML5 Picture</title> 
    <script> 

    var canvas, ctx, flag = false, 
     prevX = 0, 
     currX = 0, 
     prevY = 0, 
     currY = 0, 
     dot_flag = false; 

    var x = "black", 
    y = 2; 

    function init() { 
    canvas = document.getElementById('can'); 
    ctx = canvas.getContext('2d'); 

    var loadImage = function (imageSrc, x, y, width, height) { 
    var image = new Image(); 
    image.src = imageSrc; 
    image.onload = function() { 
     ctx.drawImage(image, x, y, width, height); 
     } 
    }; 

    loadImage("http://img4.wikia.nocookie.net/__cb20110526012910/pokemon/images/4/49/Ash_Pikachu.png", 0, 0, 500, 300); 

    w = canvas.width; 
    h = canvas.height; 

    canvas.addEventListener("mousemove", function (e) { 
     findxy('move', e) 
    }, false); 
    canvas.addEventListener("mousedown", function (e) { 
     findxy('down', e) 
    }, false); 
    canvas.addEventListener("mouseup", function (e) { 
     findxy('up', e) 
    }, false); 
    canvas.addEventListener("mouseout", function (e) { 
     findxy('out', e) 
    }, false); 
    } 

    function color(obj) { 
    switch (obj.id) { 
     case "green": 
     x = "green"; 
     break; 
     case "blue": 
     x = "blue"; 
     break; 
     case "red": 
     x = "red"; 
     break; 
     case "yellow": 
     x = "yellow"; 
     break; 
     case "orange": 
     x = "orange"; 
     break; 
     case "black": 
     x = "black"; 
     break; 
     case "white": 
     x = "white"; 
     break; 
    } 
    if (x == "white") y = 14; 
    else y = 2; 

    } 

    function draw() { 
    ctx.beginPath(); 
    ctx.moveTo(prevX, prevY); 
    ctx.lineTo(currX, currY); 
    ctx.strokeStyle = x; 
    ctx.lineWidth = y; 
    ctx.stroke(); 
    ctx.closePath(); 
    } 

    function erase() { 
    var m = confirm("Want to clear"); 
    if (m) { 
     ctx.clearRect(0, 0, w, h); 
     document.getElementById("canvasimg").style.display = "none"; 
    } 
    } 

    function save() { 
    document.getElementById("canvasimg").style.border = "2px solid"; 
    var dataURL = canvas.toDataURL(); 
    document.getElementById("canvasimg").src = dataURL; 
    document.getElementById("canvasimg").style.display = "inline"; 
    } 

    function findxy(res, e) { 
    if (res == 'down') { 
     prevX = currX; 
     prevY = currY; 
     currX = e.clientX - canvas.offsetLeft; 
     currY = e.clientY - canvas.offsetTop; 

     flag = true; 
     dot_flag = true; 
     if (dot_flag) { 
     ctx.beginPath(); 
     ctx.fillStyle = x; 
     ctx.fillRect(currX, currY, 2, 2); 
     ctx.closePath(); 
     dot_flag = false; 
     } 
    } 
    if (res == 'up' || res == "out") { 
     flag = false; 
    } 
    if (res == 'move') { 
     if (flag) { 
     prevX = currX; 
     prevY = currY; 
     currX = e.clientX - canvas.offsetLeft; 
     currY = e.clientY - canvas.offsetTop; 
     draw(); 
     } 
    } 
    } 
    </script> 
    </head> 
    <body onload="init();"> 
    <canvas id="can" width="500" height="300" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas> 
    <div style="position:absolute;top:12%;left:43%;">Choose Color</div> 
    <div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div> 
    <div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div> 
    <div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div> 
    <div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div> 
    <div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div> 
    <div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div> 
    <div style="position:absolute;top:20%;left:43%;">Eraser</div> 
    <div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div> 
    <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;"> 
    <input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;"> 
    <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;"> 
    </body> 
</html>

來源

2014-03-26 16:26:18

對不起，我沒有發佈我的完整代碼。正如你告訴我的，我確實有在我的代碼中。並且這兩行代碼也在我的代碼中，所以我沒有得到它我需要修復哪些內容:( – user3465096

仍然在編輯我的文章，我會盡快發佈一個演示。 –

非常感謝，我再次爲此道歉等待你的演示 – user3465096

無法更改HTML 5畫布背景

回答

相關問題