Question

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

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

更新

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

显示/隐藏推特图标的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=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按钮和这张护目镜照片。但我对clearRect有疑问。在clearRect之后我们可以看到画布背景颜色。我不能用圆形边框清除反射。

我该怎么做？

Answer 1

我解决了我的问题。现在我可以切换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] );

}

});

Answer 2

作为标准教程给出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。

HTML5 Canvas隐藏并显示特定图像

2 个答案: