[英]clearing the canvas for reloading image?
我在這里做錯了什么?
我正在使用html5圖像標簽將圖像寫入canvs。 我想要它替換新圖像的最后一個圖像onclick。.我能夠加載圖像,但是單擊下一個圖像時,它將與最后一個加載圖像重疊。這是代碼。.我正在嘗試使用clearRect( )功能
function drawImage(imageObj){
var stage = new Kinetic.Stage("container", 578, 500);
var layer = new Kinetic.Layer();
var x = stage.width / 2 - 200 / 2;
var y = stage.height / 2 - 137 / 2;
var width = 200;
var height = 137;
// darth vader
var darthVaderImg = new Kinetic.Shape(function(){
var context = this.getContext();
context.clearRect(x,y,width,height);
context.drawImage(imageObj, x, y, width, height);
// draw invisible detectable path for image
context.beginPath();
context.rect(x, y, width, height);
context.closePath();
});
使用我創建的此功能
這樣clearCanvasGrid(/id of the canvas/)
function clearCanvasGrid(canvasname){
var canvas = document.getElementById(canvasname); //because we are looping //each location has its own canvas ID
var context = canvas.getContext('2d');
//context.beginPath();
// Store the current transformation matrix
context.save();
// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
// Restore the transform
context.restore(); //CLEARS THE SPECIFIC CANVAS COMPLETELY FOR NEW DRAWING
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.