HTML5帆布隱藏並顯示特定圖像

我有一個畫布。在這個畫布中，我有一個圖像覆蓋了整個畫布（這是一個平板電腦的圖像）。在這個圖像中，我有3個小圖像，我有3個按鈕。HTML5帆布隱藏並顯示特定圖像

我該怎麼做，當我點擊第一個按鈕時，這會讓我的第一張圖片隱藏或可見？併爲其他按鈕做同樣的事情。

更新

這是jsfiddle。我創建了3個按鈕：

Twitter按鈕顯示/隱藏Twitter圖標。
Facebook按鈕用Google Chrome icon切換。

Linkedin按鈕顯示/隱藏linkedin圖標。

var canvas = $('#canvas')[0]; 
var ctx = canvas.getContext("2d"); 

var tablet = loadImage('http://pngimg.com/upload/tablet_PNG8592.png', main); 
var twitter = loadImage('http://vignette4.wikia.nocookie.net/callofduty/images/f/f3/Twitter_icon.png/revision/latest?cb=20120120', main); 
var facebook = loadImage('http://icons.iconarchive.com/icons/yootheme/social-bookmark/512/social-facebook-box-blue-icon.png', main); 
var linkedin = loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Linkedin_Shiny_Icon.svg/1000px-Linkedin_Shiny_Icon.svg.png', main); 

var imagesLoaded = 0; 

function main() { 
    imagesLoaded += 1; 

    if(imagesLoaded == 4) { 
    // Tablet pic 
    ctx.drawImage(tablet, 0, 0, 850, 450); 

    // Twitter Pic 
    ctx.drawImage(twitter, 150, 120, 150, 150); 
    ctx.fillStyle = "white"; 
    ctx.font = "20px Arial"; 
    ctx.fillText("Twitter", 200, 300); 

    // Facebook Pic 
    ctx.drawImage(facebook, 335, 120, 150, 150); 
    ctx.fillStyle = "white"; 
    ctx.font = "20px Arial"; 
    ctx.fillText("Facebook", 365, 300); 

    // Linkedin Pic 
    ctx.drawImage(linkedin, 540, 120, 150, 150); 
    ctx.fillStyle = "white"; 
    ctx.font = "20px Arial"; 
    ctx.fillText("Linkedin", 580, 300); 
} 
} 

function loadImage(src, onload) { 
    var img = new Image(); 

    img.onload = onload; 
    img.src = src; 

    return img; 
}

UPDATE 2

我又jsfiddle here。現在我們可以點擊facebook按鈕和這張與linkedin圖片一起使用的護目鏡。但是我對clearRect有一個問題。在clearRect之後，我們可以看到畫布背景顏色。我無法用圓角清除邊界。

我該怎麼做？

來源

2016-01-13 John

這可能是個好問題。我建議你添加你的代碼，以便我們知道我們在看什麼。 – Twisty

是的，明天生病更新我的問題 – John

我解決了我的問題。現在我可以切換2張圖片。我在一個漫長的夜晚工作，我開發了這個：See my fiddle

正如你可以看到我開發的3個功能：

clearArea（）：要清除圖片，文本區域，繪製一個矩形，用相同的平板電腦背景的顏色。
add_image（）：將圖像添加到畫布（需要在之前加載）。
add_text（）：該函數在圖片或任何你想要的東西下面添加一個文本。

而對於切換，這是在Facebook點擊事件。

// Clear the area 
function clearArea(clear_position, color){ 

    // Clear area 
    ctx.clearRect(clear_position[0], clear_position[1], clear_position[2], clear_position[3]); 

    // Recover the background color 
    ctx.fillStyle = color; 

    // Draw the background 
    ctx.fillRect(clear_position[0], clear_position[1], clear_position[2], clear_position[3]); 

} 

// Add an image to the context 
function add_image(image, image_size){ 

    // Draw the image 
    ctx.drawImage(image, image_size[0], image_size[1], image_size[2], image_size[3]); 

} 

// Add a text to the context 
function add_text(text_color, text_font, text_value, text_position){ 

    // Text color 
    ctx.fillStyle = text_color; 

    // Font type and size 
    ctx.font = text_font; 

    // Text value and position 
    ctx.fillText(text_value, text_position[0], text_position[1]); 

} 


$('#toggle_facebook').on('click', function(){ 


if (icon_facebook_count++ % 2 != 0) { 

    clearArea([335, 120, 150, 190], '#272727'); 

    add_image(facebook, [335, 120, 150, 150]); 

    add_text('white', text_size, 'Facebook', [370, 300]); 

}else{ 

    clearArea([335, 120, 150, 190], '#272727'); 

    add_image(googlechrome, [335, 120, 150, 150]); 

    add_text('white', text_size, 'Google', [377, 300]); 

} 

});

來源

2016-01-15 08:54:46 John

由於給出了參考教程here。您可以使用下面的代碼

<img id="scream" src="/examples/example.png" alt="The Scream" width="220" height="277"> 

<canvas id="mycanvas" width="250" height="300" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 

<p><button onclick="mycanvas()">Try it</button></p> 

<script> 
function mycanvas() { 
var c = document.getElementById("mycanvas"); 
var ctx = c.getContext("2d"); 
var img = document.getElementById("scream"); 
ctx.drawImage(img,10,10); 
} 
</script>

您可以添加一些JavaScript邏輯來顯示隱藏的票面您的要求顯示自定義圖像。這是一個工作example。

來源

2016-01-14 08:21:09

HTML5帆布隱藏並顯示特定圖像

回答

相關問題