HTML5 Canvas 隐藏和显示特定图像

Question

我有一个 canvas。在这个 canvas 中，我有一张图片覆盖了我的整个 canvas（这是平板电脑的图片）。在这张图片中，我有 3 个小图片和 3 个按钮。

当我单击第一个按钮时，这会使我的第一张图片隐藏或可见，我该怎么做？对其他按钮做同样的事情。

更新

这是jsfiddle。我创建了 3 个按钮：

用于显示/隐藏 Twitter 图标的 Twitter 按钮。
将其切换为 Google Chrome icon 的 Facebook 按钮。

用于显示/隐藏 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=20120120012303', 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;
}

更新 2

我又做了一个jsfiddle here。现在我们可以点击 facebook 按钮和带有 linkedin 图片的护目镜。但是我对 clearRect 有疑问。在 clearRect 之后我们可以看到 canvas 背景色。我无法使用圆形边框清除矩形。

我该怎么做？

Answer 1

作为给定的教程 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.

Answer 2

我解决了我的问题。现在我可以切换 2 个图像。我工作了一个漫长的夜晚，然后开发了这个：See my fiddle

如您所见，我开发了 3 个功能：

clearArea() : 清空图片、文字区域，并绘制一个与数位板背景颜色相同的矩形。
add_image() : 将您的图像添加到 canvas（之前需要加载）。
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] );

}

});

HTML5 Canvas 隐藏和显示特定图像

HTML5 Canvas Hide and show specific image

html

jquery

html5-canvas