Question

我正在尝试使用画布创建一个单页面，您可以单击以随机添加/放置图像。我已经获得了大部分我想要的工作，但是对于jquery和canvas非常新，我仍然无法弄清楚如何为我的图像设置最大尺寸。据我所知，当你没有在css中手动设置画布大小时，在画布上制作图像可能会非常困难，但我有一个调整大小的画布，所以我不确定我是怎么做的绕过那个。

我希望我放置的图像的最大高度/最大宽度为视口的80％。我尝试在css中设置最大大小，但它没有做任何事情。

这是jsfiddle

  $(document).ready(function () {
  	var images = [];
    $("#siteload").fadeIn(1500);
  	$('.put').each(function() {
    	images.push($(this).attr('src'));
    });
    (function() {
    var
        htmlCanvas = document.getElementById('c'),
        context = htmlCanvas.getContext('2d');
        initialize();
        img = new Image();
        count = 0;
        htmlCanvas.onclick= function(evt) {
        img.src = images[count];
          var x = evt.offsetX - img.width/2,
              y = evt.offsetY - img.height/2;
          context.drawImage(img, x, y);
          count++;
          if (count == images.length) {
          count = 0;
          }
        }
      function initialize() {
        window.addEventListener('resize', resizeCanvas, false);
        resizeCanvas();
      }
      function resizeCanvas() {
        htmlCanvas.width = window.innerWidth;
        htmlCanvas.height = window.innerHeight;
      }
    })();
  });
  $(".hvr_cnt").mouseenter(function () {
      title = $("<div class='hvr_ttl'>" + $(this).children()[0].title + "</div>");
      $(this).children()[0].title = "";
      $(this).append(title);
  });
  $(document).mousemove(function(e){
     $('.hvr_ttl').css({
       top: e.pageY - $(".hvr_ttl").height()/2,
       left:  e.pageX - $(".hvr_ttl").width()/2
     });
   });
  $(".hvr_cnt").mouseleave(function (e) {
     $(this).children()[0].title = $($(this).children()[1]).html();
     $(this).children()[1].remove();
  });

body {
  margin: 0;
  padding: 0;
  background: rgb(240, 240, 240);
  width: 100%;
  height: 100%;
  border: 0;
  color: rgb(40, 40, 40);
  overflow: hidden;
  display: block;
}

.slides {
  display: none
}

#c {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
}

.hvr_ttl {
  display: block;
  position: absolute;
  pointer-events: none;
  cursor: none;
}

.hvr_cnt {
  cursor: none;
  padding: none;
  margin: none;
}

<body ontouchstart="">
  <div class="hvr_cnt">
    <canvas id="c" title="click"></canvas>
  </div>
  <ul class="slides">
    <li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" class="put" /></li>
    <li><img src="https://emojipedia-us.s3.amazonaws.com/thumbs/160/google/56/thumbs-up-sign_1f44d.png" class="put" /></li>
  </ul>
</body>

任何帮助将不胜感激：）

Answer 1

试试这个：

htmlCanvas.onclick= function(evt) {
        img.src = images[count];

        img.width = 80/100*  htmlCanvas.width;
        img.height = 80/100*  htmlCanvas.height;

          var x = evt.offsetX - img.width/2,
              y = evt.offsetY - img.height/2;
          // context.drawImage(img, x, y);
     context.drawImage(img, x, y, img.width, img.height);
          count++;
          if (count == images.length) {
          count = 0;
          }


        }

Answer 2

context.drawImage(img, 0, 0,img.width,img.height,0,0,htmlCanvas.width,htmlCanvas.height);

您也可以使用background-size:cover;

Answer 3

最大高度/宽度不起作用，因为画布中的所有内容都与css无关。

如果您想将图片设置为80％，请使用htmlCanvas.width和htmlCanvas.height计算新尺寸，并使用context.drawImage(img, x, y, w, h)在绘图时设置图片尺寸。

也许this post可能会有所帮助。

在canvas和jquery中设置图像大小百分比

3 个答案: