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帆布隐藏并显示特定图像

回答

相关问题