0

キャンバスをページの特定の場所に配置するにはどうすればよいですか? たとえば、ascii「テレビ画面」内にキャンバスを配置したいとします。どうやってやるの？

ありがとう

                              o
                     o /
                      \ /
                       \ /
                        \ /
    +--------------------v--------------------------+
    | | ______________________________________ @|
    | | / \ |
    | | | | | | (\) |
    | | | | | | | |
    | | | | | | | |
    | | | | | | | |
    | | | | | | | |
    | | | | | | | |
    | | | | | | | |
    | | | | | | | |
    | | | | | | (-) |
    | | | | | | | |
    | | \ / :|||: |
    | | -ooo--------------------------------- :|||: |
    +-----------------------------------------------------+
             [] []
4

2 に答える 2

3

合成を使用して、描画をテレビの画面のみに制限できます

利点:

  • canvas 要素だけがあり、img+canvas を CSS で調整する必要はありません。
  • 長方形ではないテレビ画面に描画できます。
  • テレビ画面を「ビューポート」のように使えます。
  • サイズを変更する場合、ビューポートを適切に配置しておく方が簡単です。

それはこのように動作します：

テレビの画像をキャンバスに描画します。

ctx.drawImage(tv,0,0,tv.width,tv.height);

このテレビの画像で重要なことは、画面に透明なピクセルがあることです

ここに画像の説明を入力

画面に何かを描画する前に、合成を「destination-over」に設定します。これにより、canvas は画面 (テレビ) に既に描画されている非透明ピクセルを保持し、透明ピクセル (テレビ画面) にのみ描画します。

結果: テレビの画面にのみ描画しています。テレビの残りの部分は保存されます。

ctx.globalCompositeOperation="destination-over";

ここに画像の説明を入力

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/7JPrx/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: white; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var tv=new Image();
    var land=new Image();
    tv.onload=function(){
        land.onload=function(){
            draw();
        }
        land.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/landscape.png";
    }
    tv.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/tv1.png";

    var offsetX=0;

    function draw(){
        // clear the canvas
        ctx.clearRect(0,0,canvas.width,canvas.height);
        // draw the tv
        // NOTE: the screen of the tv must be transparent
        ctx.drawImage(tv,0,0,tv.width,tv.height);
        // begin drawing the screen
        ctx.save();
        ctx.beginPath();
        // this causes any drawing to ONLY draw over transparent pixels
        // that's how we draw within the screen because
        // the screen is the only part of the tv with transparent pixels
        ctx.globalCompositeOperation="destination-over";
        // move (translate) our drawing to the screen part of the tv image
        ctx.translate(32,95);
        // draw the landscape scrolling across the screen (using offsetX)
        ctx.drawImage(land,offsetX,0);

        // reset
        ctx.restore();
        offsetX-=10;
        if(offsetX<=-600){offsetX=0;}
        setTimeout(draw,100);
    }

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
于 2013-05-29T20:46:35.717 に答える
1

cssコマンドを使用してキャンバスの位置を設定するだけです

position:relative; or position:absolute;

例えば

canvas{
         position:relative;
         top:Ypx;
         left:Xpx;
}
于 2013-05-29T15:42:30.167 に答える