海量内容导入到HTML5画布

我仍然坚持，需要您的帮助我的画布项目。我得到了一个模板的想法，我想在那里看到，我想现在插入一个内容。从我最后一个问题，我有这个工作画布模板：jsfiddle.net/AbdiasSoftware/LmCwZ/2/这是我想要在我的第一个选项卡上的想法。希望在您的帮助下创建第一个主标签页，我将继续扩展示例并自行开展工作。
第一个选项卡示例：http://i.imgur.com/5Anzfny.png
我该如何为我的第一个选项卡执行此操作？一些文本内容应该由应用程序自动更新。先谢谢你。海量内容导入到HTML5画布

来源

2014-02-26 user3340575

正如@Ken在回答您的最后一个问题时所建议的，复杂内容的布局通常使用HTML + CSS完成。一个给你选项卡的好工具是jqueryUI的选项卡控件：https://jqueryui.com/tabs/生产应用程序将使用HTML + CSS。

但是，由于您正在为学习目的编码项目，因此以下是如何为您的标签内容创建“模板”。

JavaScript有一个变量，称为object。对象有点像数组，因为一个对象可以容纳多条信息。对象中的每条信息都被标记。

您要在模板中包含可能看起来像这样保存有关文本信息的对象：

var myTextObject1 = { text:"Hello", x:100, y:20 }; 

var myTextObject2 = { text:"World", x:100, y:35 };

为了使您的模板，创建内容阵列和保存数组中的对象

var contents=[]; 

contents.push(myTextObject1); 

contents.push(myTextObject2);

然后，当您激活此选项卡中可以使用的对象提请选项卡上的内容

for(var i=0;i<contents.length;i++){ 
    drawTextContent(contents[i]); 
} 

function drawTextContent(text){ 
    ctx.fillText(text.text,text.x,text.y); 
}

当然，您需要创建不同种类的对象：

定义文本的对象。
定义图像的对象。
定义背景矩形的对象。
定义字幕图像（图像+文本）的对象。

下面就开始示例代码和演示：http://jsfiddle.net/m1erickson/WNaLn/

enter image description here

<!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: ivory; } 
    canvas{border:1px solid red;} 
</style> 
<script> 
$(function(){ 

    // get a reference to the canvas and context 
    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    // the contents[] array will hold individual content objects 
    // the content objects will be used to later draw the content to the tab 
    var contents=[]; 

    // load a test image 
    var house=new Image(); 
    house.onload=start; 
    house.src="houseIcon.png"; 


    function start(){ 

     // create some test contents 

     // tab background 

     addBackgroundRect(0,0,275,275,"red"); 

     // left panel example 

     addBackgroundRect(10,10,100,250,"lavender"); 

     addImageContent(house,50,15,20,20); 

     addImageContent(house,75,65,20,20); 

     addImageContent(house,50,110,20,20); 

     addImageContent(house,15,65,20,20); 

     addImageContent(house,40,65,30,30); 

     // right panel example 

     addBackgroundRect(110,10,150,100,"white"); 

     addTextContent("Text1",115,20,"red"); 
     addTextContent("Text2",115,40,"red"); 
     addTextContent("Text3",115,60,"red"); 
     addTextContent("Text4",115,80,"red"); 

     addTextImageContent("Caption",house,175,20,60,60); 

     drawContents(contents); 
    } 

    // draw all content in the contents array 

    function drawContents(contents){ 

     for(var i=0;i<contents.length;i++){ 
      var content=contents[i]; 
      // 
      switch (content.type){ 
       case "background": 
        drawBackgroundRect(content); 
        break; 
       case "text": 
        drawTextContent(content); 
        break; 
       case "image": 
        drawImageContent(content); 
        break; 
       case "textImage": 
        drawTextImageContent(content); 
        break; 
       default: 
        break; 
      } 
     } 
    } 


    // draw contents based on a content object 

    function drawBackgroundRect(bk){ 
     ctx.fillStyle=bk.color; 
     ctx.fillRect(bk.x,bk.y,bk.width,bk.height); 
    } 
    // 
    function drawTextContent(text){ 
     ctx.fillStyle=text.color; 
     ctx.fillText(text.text,text.x,text.y); 
    } 
    // 
    function drawImageContent(img){ 
     ctx.drawImage(img.image,img.x,img.y,img.width,img.height); 
    } 
    // 
    function drawTextImageContent(tImg){ 
     ctx.drawImage(tImg.image,tImg.x,tImg.y,tImg.width,tImg.height); 
     ctx.fillStyle="black"; 
     ctx.fillRect(tImg.x,tImg.y+tImg.height-15,tImg.width,15); 
     ctx.fillStyle="white"; 
     ctx.fillText(tImg.text,tImg.x+5,tImg.y+tImg.height-4); 
    } 


    // create content objects 

    function addBackgroundRect(x,y,width,height,color){ 
     contents.push({ 
      type:"background", 
      x:x, 
      y:y, 
      width:width, 
      height:height, 
      color:color 
     }); 
    } 
    // 
    function addTextContent(text,x,y,color){ 
     contents.push({ 
      type:"text", 
      text:text, 
      x:x, 
      y:y, 
      color:color 
     }); 
    } 
    // 
    function addImageContent(imgObject,x,y,width,height){ 
     contents.push({ 
      type:"image", 
      image:imgObject, 
      x:x, 
      y:y, 
      width:width, 
      height:height 
     }); 
    } 
    // 
    function addTextImageContent(text,imgObject,x,y,width,height){ 
     contents.push({ 
      type:"textImage", 
      text:text, 
      image:imgObject, 
      x:x, 
      y:y, 
      width:width, 
      height:height 
     }); 
    } 


}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

来源

2014-02-26 19:31:10 markE

海量内容导入到HTML5画布

回答

相关问题