Question

嗨Stack 溢出社区，

我正在尝试使用Js将swf图像添加到canvas元素。

包含canvas元素的HTML看起来如下所示：

<div class="thumbnail">
    <div id="builder" style="background: #FFF url('assets/images/canvas.png') repeat;" class="thumb" data-design="<?php echo 'http://assets.zwinky.com/assets3/avatar/avatar10.8.swf?u=' . $user->username; ?>">
        <canvas style="position: relative; display: block; width: 100%;" width="565" height="656"></canvas>
    </div>
</div>

正在测试JS / Jquery如下：

<script type="text/javascript">
    $(document).ready(function() {
        var design = $("#builder").attr('data-design');
        var canvas = $("#builder").find('canvas')[0];
        var ctx = canvas.getContext('2d');
        var img = new Image;
        img.onload = function() {
            ctx.drawImage(this, 0, 0);
        };
        img.src = design;
    });
</script>

如何将包含swf url的data-design属性添加到canvas元素？

希望有人可以提供帮助。

Answer 1

<script type="text/javascript">
    $(document).ready(function() {
        var design = $("#builder").attr('data-design');
        var canvas = $("#builder").find('canvas')[0];
        canvas.setAttribute('data-design',design);
        var ctx = canvas.getContext('2d');
        var img = new Image;
        img.onload = function() {
            ctx.drawImage(this, 0, 0);
        };
        img.src = design;
    });
</script>

将数据设计属性添加到canvas元素

1 个答案: