將畫布放在頁面上的特定位置

如何將畫布放入頁面上的特定位置？例如，我想在ascii「電視屏幕」內找到畫布。我怎樣才能做到這一點？將畫布放在頁面上的特定位置

感謝

 

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

來源

2013-05-29 ysokolovsky

使用CSS定位。 – SLaks

您可以使用合成到圖形限制對電視的僅屏幕

個

優點：

只是有canvas元素 - 無需使用CSS協調IMG +帆布。
你可以畫成一個非矩形的電視屏幕。
您可以像使用「視口」一樣使用電視屏幕。
如果調整大小，保持視口正確定位更簡單。

它的工作原理是這樣的：

繪製電視的圖像，以你的畫布：

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

這個電視圖像的重要一點是，屏幕上有透明的像素

enter image description here

在你d在屏幕上生成任何東西，將合成設置爲「目的地結束」。這會導致畫布保留已經在屏幕上繪製的任何非透明像素（電視），並僅繪製透明像素（您的電視屏幕）。

結果：您只能繪製到電視屏幕上。電視的其餘部分被保存。

ctx.globalCompositeOperation="destination-over";

enter image description here

這裏是代碼和一個小提琴：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-29 20:46:35 markE

，你可以簡單地使用CSS命令來設置畫布位置

position:relative; or position:absolute;

如

canvas{ 
     position:relative; 
     top:Ypx; 
     left:Xpx; 
}

來源

2013-05-29 15:42:30 MShoaib91

將畫布放在頁面上的特定位置

回答

相關問題