Question

<div class="thumbimg">
    <ul class="list-unstyled">
       <li class="timgare"><img src="images/F.png" class="dummy_data" id="vader"></li>
       <li class="timgare"><img src="images/L.png" class="dummy_data" id="c3po"></li>
       <li class="timgare"><img src="images/R.png" class="dummy_data" id="annakin"></li>
       <li class="timgare"><img src="images/B.png" class="dummy_data" id="bhdhs"></li>
    </ul> 
</div>
 <canvas id="c" style="border:1px solid black;"></canvas>

这是我的代码。如何使用onclick更改图像。我使用大缩略图作为画布。我是画布的新手，所以让我知道我将如何做这项工作。

Answer 1

检查此示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Add another select</button><br>

<select class="first" multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>


<select class="second" multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

Working Demo

Answer 2

请查看以下工作片段。

$(".timgare").on("click",function(){
  var imgsrc = ($(this).find("img"));
  draw(imgsrc);
  return false;
});
function draw(image){
  var canvas = $('#c')[0];
  canvas.width = 800;
  canvas.height = 800;
  var c = canvas.getContext("2d");
  var img = new Image();
  img.src = image.attr("src");
  img.onload = function(){
    c.drawImage(img, 0, 0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbimg">
  <ul class="list-unstyled">
    <li class="timgare"><img width="100" src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg" class="dummy_data" id="vader"></li>
    <li class="timgare"><img width="100" src="http://www.1zoom.net/big2/61/263820-Sepik.jpg" class="dummy_data" id="annakin"></li>
  </ul> 
</div>
<canvas id="c" style="border:1px solid black;"></canvas>

Onclick更改图像

2 个答案: