0

テーブルの下にテーブルとキャンバス フィールドを持つプロジェクトに取り組んでいます。

写真の 1 つを背景にする必要があり、私の場合は tshirt.png でした。

今まで私は以下のことをしてきました。2 つのファイル (index.html と jQuery.js) があります。

索引

<html>
  <head>
<script src="js/jQuery.js"></script>
 </head>
   <table border="1">
        <tr>
    <td>#</td>
    <td>filename</td>
    <td>x</td>
    <td>y</td>
    <td>z</td>
        </tr>

<tr>
    <td>1</td>
    <td><img src="images/sheep.png" width="40px" height="40px"></img></td>
    <td><input type="text" value="" name="x"></td>
    <td><input type="text" value="" name="y"></td>
    <td><input type="text" value="" name="z"></td>
</tr>
<tr>
    <td>2</td>
    <td><img src="images/tshirt.png" width="40px" height="40px"></td>
    <td><input type="text" value=""></td>
    <td><input type="text" value=""></td>
    <td><input type="text" value=""></td>
  </tr>
  <tr>
    <td>3</td>
    <td>item.png</td>
    <td><input type="text" value=""></td>
    <td><input type="text" value=""></td>
    <td><input type="text" value=""></td>
   </tr>
    </table>

   <section id="main">
   <canvas  id="canvas" width="1024" height="768" style="border:1px solid red;">    
   </canvas>
   </section>
</html>

jQuery.js

function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');

    var pic = new Image();
    pic.src = "images/sheep.png";
    pic.addEventListener("load", function() { canvas.drawImage(pic,0,0,100,200)}, false);

    var background = new Image();
    background.src = "images/tshirt.png";
    background.addEventListener("load",function(){
        canvas.drawImage(background,0,250,200,300)}, false);
    }
    window.addEventListener("load", doFirst, false);

どんな助けでも大歓迎です

4

1 に答える 1

0

キャンバスは確かに異なる考え方とアプローチをとりますが、時には一歩下がってより「シンプルな」アプローチを考えることを忘れないでください。

CSS を使用して背景を定義するだけです

background: url("images/tshirt.png");

以前の投稿からjQueryを介してJavaScriptで設定する方法は次のとおりです

于 2013-02-19T20:07:43.873 に答える