javascript - 列表内的HTML5 Canvas，无法在所有 Canvas 上绘制图像

我试图在无序列表内的HTML5 Canvas上绘制图像。每个li元素内有1个画布，ul内部总共有20 li。我正在使用下面的代码在画布上绘制图像，但是只有最后一块画布才能在其上绘制图像。我是HTML5的新手，我不确定自己做错了什么，但是可以肯定我做错了什么。

<_ul id="ulDirectory" data-role="listview" data-filter="true">
<li data-role="fieldcontain" style="background: #dddddd; height: 80px">
            <div class="ui-grid-a">
                <div class="ui-block-a" style="width: 25%">
                    <canvas id="myCanvas<%: Html.DisplayFor(_m => item.EmployeeCode) %>" width="80" height="80" class="pull-left"></canvas>
                </div>
                <div class="ui-block-b" style="width: 75%; line-height: 25px">
                    <span><%: Html.DisplayFor(_m => item.FName) %>  <%: Html.DisplayFor(_m => item.LName) %></span><br />
                    <span><%: Html.DisplayFor(_m => item.Mobile) %> | <%: Html.DisplayFor(_m => item.EmployeeCode) %></span><br />
                    <span><%: Html.DisplayFor(_m => item.Email) %></span>
                </div>
            </div>
        </li>
</_ul>

<script type="text/javascript">
function displayImage() {`enter code here`
            $("ul#ulDirectory > li").find("canvas").each(function () {
                var myImage = new Image(); //**UPDATE**
                canvas = this;
                if (canvas.getContext) {
                    ctx = canvas.getContext("2d");
                    myImage.onload = function () {
                        ctx.drawImage(myImage, 0, 0, 80, 80);
                        ctx.strokeStyle = "white";
                        ctx.lineWidth = "25";
                        ctx.beginPath();
                        ctx.arc(40, 40, 52, 0, Math.PI * 2, true);
                        ctx.closePath();
                        ctx.strokeStyle = '#dddddd';
                        ctx.stroke();
                    }
                    myImage.src = "../../TempUpload/hitin831121.png";
                }
            });
$(document).ready(function () {
            displayImage();
        });
</script>

最佳答案

您的所有变量都属于全局范围，并且在每次迭代中都会被覆盖。
使用var关键字在每个函数范围内声明变量。

$("ul#ulDirectory > li canvas").each(function () {
    var canvas = this;
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        var myImage = new Image();
        myImage.onload = function () {
            ctx.drawImage(myImage, 0, 0, 80, 80);
            ctx.strokeStyle = "white";
            ctx.lineWidth = "25";
            ctx.beginPath();
            ctx.arc(40, 40, 52, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.strokeStyle = '#dddddd';
            ctx.stroke();
        }
        myImage.src = ...

这是一个小提琴：http://jsfiddle.net/4Lozwkzq/1/