2

我正在尝试将画布元素放入“缩略图”类 div（来自引导程序）中。在这个画布内，我想画一个图像，然后在上面画一些东西。问题是，在我的解决方案中，画布内的图像不像我使用 img 标签时那样“自然”地表现。这张图片说明了我想说的：

正常图像：

在此处输入图像描述

画布图像：

在此处输入图像描述

这是我为每个人使用的代码。

普通的：

<li class="span3">
    <div class="thumbnail">
        <img src="Images/pasta1.jpg" data-src="holder.js/300x200" alt="">
       <h3>PASTA 1</h3>
       <p>Pasta a la xxx, con salsa de yyy en zzz.</p>
    </div>
</li>

帆布：

<li class="span3">
<div class="thumbnail">
    <canvas id="canvas" style="width: 100%; height: 100%;"></canvas>
    <h3>PASTA 1</h3>
    <p>Pasta a la xxx, con salsa de yyy en zzz.</p>
    </div>
</li>

<script>
function drawImageTime(canvas_id,image_src,percent)
{
    var canvas = document.getElementById(canvas_id);
    var context = canvas.getContext('2d');
    var image = new Image();

    image.onload = function()
    {
        context.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);
        context.fillStyle = "rgba(0, 200, 100, 0.33)";
        context.fillRect(0,0,canvas.width*(percent/100),canvas.height);
    };
    image.src = image_src;
}

drawImageTime('canvas','Images/pasta1.jpg',73);     
</script>

我尝试为画布元素提供相同样式的图像，但这不起作用。手动调整画布元素的大小也不起作用。有任何想法吗？谢谢。

4

1 回答 1

0

所以我终于找到了解决问题的方法，除了一件事我根本想不通。我在每个引导程序“缩略图”中留下画布占位符，我有这些功能。

  • 在画布占位符中绘制图像和“加载栏”

    function drawImageTime(canvas_id,image_src,percent)
    {
        var canvas = document.getElementById(canvas_id);
        var context = canvas.getContext('2d');
        var image = new Image();

        image.onload = function()
        {
            canvas.width = $('#'+canvas_id).parent().width();
            canvas.height = $('#'+canvas_id).parent().width()*(image.height/image.width);
            context.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);
            context.fillStyle = "rgba(75, 100, 200, 0.33)";
            context.fillRect(0,0,canvas.width*(percent/100),canvas.height);
        };
        image.src = image_src;
    }

  • 甚至超出所有缩略图的高度

    function equalHeight(group) {
        tallest = 0;
        group.each(function() {
            thisHeight = $(this).height();
            if(thisHeight > tallest) {
                tallest = thisHeight;
                console.log("Tallest = " + tallest);
                //alert(1);
            }
        });
        group.each(function() { $(this).height(tallest); });
    }

我正在调用 equalHeight 函数$(document).ready，但它不会调整缩略图的大小。但是，如果我在代码中添加一个 alert() （我在发布的代码中将其注释掉），它会完美运行。

我不明白！有任何想法吗？

于 2013-06-09T05:42:35.860 回答