1

私はコーダーやWeb開発者よりもグラフィックデザイナーの方が多いので、知識は少し限られていますが、固定のキャンバスサイズ（イラストレーターのピクセルサイズ）を画面に合わせたサイズに変更できないようです。そして、その主題に関連するすべての投稿は、私をこのように公正に失敗させました（おそらく私自身のユーザーエラーによって）。ご覧いただきありがとうございます！

作業中のページはhttp://www.advancedseismic.comで稼働しています。

ウィンドウに合うようにHTML5キャンバスのサイズを変更する例に従ってみましたが、役に立ちませんでした。

キャンバスがタグ付けされているdivは次のとおりです。

<div id="canvasesdiv"> 

  <canvas id="layer4" style="z-index: 0; position:absolute; left:0px; top:0px;"></canvas>  

</div>

これがキャンバスです

var layer4;
var ctx4;

function init() {

    layer4 = document.getElementById("layer4");
    ctx4 = layer4.getContext("2d");
    setInterval(drawAll, .1);
    drawAll();
}

function drawAll() {    
draw4();
}

function draw4() {

  var alpha = ctx4.globalAlpha;
  var gradient;

  // background/Image
  ctx4.save();
  ctx4.drawImage(document.getElementById("image1"), 0.0, 0.0);
  ctx4.restore();

  // foreground/Path
  ctx4.save();
  ctx4.beginPath();
  ctx4.moveTo(1225.7, 792.2);
  ctx4.lineTo(0.1, 792.5);
  ctx4.lineTo(0.1, 519.8);
  ctx4.lineTo(1225.7, 520.9);
  ctx4.lineTo(1225.7, 792.2);
  ctx4.closePath();
  gradient = ctx4.createLinearGradient(612.9, 792.5, 612.9, 519.8);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(0, 0, 0)");
  ctx4.fillStyle = gradient;
  ctx4.fill();
  ctx4.restore();

  // emailinput/Path
  ctx4.save();
  ctx4.beginPath();
  ctx4.moveTo(376.5, 166.3);
  ctx4.bezierCurveTo(376.5, 159.7, 381.9, 154.3, 388.5, 154.3);
  ctx4.lineTo(804.1, 154.3);
  ctx4.bezierCurveTo(810.7, 154.3, 816.1, 159.7, 816.1, 166.3);
  ctx4.lineTo(816.1, 197.8);
  ctx4.bezierCurveTo(816.1, 204.4, 810.7, 209.8, 804.1, 209.8);
  ctx4.lineTo(388.5, 209.8);
  ctx4.bezierCurveTo(381.9, 209.8, 376.5, 204.4, 376.5, 197.8);
  ctx4.lineTo(376.5, 166.3);
  ctx4.closePath();
  ctx4.fillStyle = "rgb(255, 255, 255)";
  ctx4.fill();
  ctx4.restore();

  // mailicon/Image
  ctx4.save();

  ctx4.restore();

  // emailbutton/Path
  ctx4.save();
  ctx4.beginPath();
  ctx4.moveTo(1044.6, 198.0);
  ctx4.bezierCurveTo(1044.6, 204.6, 1039.1, 209.9, 1032.5, 209.9);
  ctx4.lineTo(839.7, 209.9);
  ctx4.bezierCurveTo(833.1, 209.9, 827.4, 204.3, 827.4, 197.7);
  ctx4.lineTo(827.5, 165.9);
  ctx4.bezierCurveTo(827.5, 159.3, 832.7, 154.4, 839.3, 154.4);
  ctx4.lineTo(1032.6, 154.2);
  ctx4.bezierCurveTo(1039.3, 154.2, 1044.5, 159.3, 1044.5, 166.0);
  ctx4.lineTo(1044.6, 198.0);
  ctx4.closePath();
  gradient = ctx4.createLinearGradient(936.0, 209.9, 936.0, 154.2);
  gradient.addColorStop(0.00, "rgb(237, 28, 36)");
  gradient.addColorStop(0.80, "rgb(239, 59, 38)");
  gradient.addColorStop(1.00, "rgb(240, 90, 40)");
  ctx4.fillStyle = gradient;
  ctx4.fill();

  // emailbutton/Request an Invitation
  ctx4.font = "21.0px 'Arial'";
  ctx4.fillStyle = "rgb(255, 255, 255)";
  ctx4.fillText("Request an Invitation", 838.7, 189.2);
  ctx4.restore();

  // compstand/Group
  ctx4.save();

  // compstand/Group/Mesh
  ctx4.save();
  ctx4.drawImage(document.getElementById("image3"), 516.8, 570.5);

  // compstand/Group/Group

  // compstand/Group/Group/Path
  ctx4.save();
  ctx4.beginPath();
  ctx4.moveTo(691.0, 635.8);
  ctx4.bezierCurveTo(691.0, 635.7, 690.9, 635.7, 690.9, 635.7);
  ctx4.bezierCurveTo(690.9, 635.7, 691.0, 635.7, 691.0, 635.8);
  ctx4.closePath();
  gradient = ctx4.createLinearGradient(690.9, 635.7, 691.0, 635.7);
  gradient.addColorStop(0.00, "rgb(186, 187, 189)");
  gradient.addColorStop(0.24, "rgb(106, 106, 106)");
  gradient.addColorStop(0.63, "rgb(186, 187, 189)");
  gradient.addColorStop(1.00, "rgb(88, 88, 88)");
  ctx4.fillStyle = gradient;
  ctx4.fill();

  // compstand/Group/Group/Path
  ctx4.beginPath();
  ctx4.moveTo(692.1, 637.7);
  ctx4.bezierCurveTo(691.9, 638.4, 690.7, 639.1, 687.4, 639.2);
  ctx4.bezierCurveTo(680.3, 639.4, 604.9, 639.2, 604.9, 639.2);
  ctx4.bezierCurveTo(604.9, 639.2, 529.5, 639.4, 522.5, 639.2);
  ctx4.bezierCurveTo(518.5, 639.0, 517.5, 638.2, 517.8, 637.2);
  ctx4.bezierCurveTo(516.8, 639.4, 517.2, 643.0, 522.5, 643.2);
  ctx4.bezierCurveTo(529.5, 643.4, 604.9, 643.2, 604.9, 643.2);
  ctx4.bezierCurveTo(604.9, 643.2, 680.3, 643.4, 687.4, 643.2);
  ctx4.bezierCurveTo(692.2, 643.0, 692.8, 639.9, 692.1, 637.7);
  ctx4.closePath();
  gradient = ctx4.createLinearGradient(517.4, 640.3, 692.3, 640.3);
  gradient.addColorStop(0.00, "rgb(186, 187, 189)");
  gradient.addColorStop(0.24, "rgb(106, 106, 106)");
  gradient.addColorStop(0.63, "rgb(186, 187, 189)");
  gradient.addColorStop(1.00, "rgb(88, 88, 88)");
  ctx4.fillStyle = gradient;
  ctx4.fill();
  ctx4.restore();
  ctx4.restore();
  ctx4.restore();

  // comingsoon/Coming Soon    
  //ctx4.save();
  //ctx4.font = "60.0px 'Simply*Glamorous'";
  //ctx4.fillStyle = "rgb(255, 255, 255)";
  //ctx4.fillText("Coming Soon . . . ", 413.8, 86.6);
  //ctx4.restore();

  // compreflect/Group
  ctx4.save();
  ctx4.globalAlpha = alpha * 0.90;

  // compreflect/Group/Group
  ctx4.save();
  ctx4.globalAlpha = alpha * 0.20;

  // compreflect/Group/Group/Mesh
  ctx4.save();
  ctx4.globalAlpha = alpha * 1.00;
  ctx4.drawImage(document.getElementById("image4"), 517.9, 651.4);

  // compreflect/Group/Group/Group

  // compreflect/Group/Group/Group/Path
  ctx4.save();
  ctx4.beginPath();
  ctx4.moveTo(519.7, 655.7);
  ctx4.bezierCurveTo(519.7, 655.7, 519.8, 655.7, 519.8, 655.8);
  ctx4.bezierCurveTo(519.8, 655.7, 519.7, 655.7, 519.7, 655.7);
  ctx4.closePath();
  gradient = ctx4.createLinearGradient(519.8, 655.7, 519.7, 655.7);
  gradient.addColorStop(0.00, "rgb(186, 187, 189)");
  gradient.addColorStop(0.24, "rgb(106, 106, 106)");
  gradient.addColorStop(0.63, "rgb(186, 187, 189)");
  gradient.addColorStop(1.00, "rgb(88, 88, 88)");
  ctx4.fillStyle = gradient;
  ctx4.fill();

  // compreflect/Group/Group/Group/Path
  ctx4.globalAlpha = alpha * 0.50;
  ctx4.beginPath();
  ctx4.moveTo(518.6, 653.8);
  ctx4.bezierCurveTo(518.8, 653.0, 520.0, 652.4, 523.3, 652.2);
  ctx4.bezierCurveTo(530.4, 652.0, 605.8, 652.2, 605.8, 652.2);
  ctx4.bezierCurveTo(605.8, 652.2, 681.1, 652.0, 688.2, 652.2);
  ctx4.bezierCurveTo(692.2, 652.4, 693.2, 653.3, 692.9, 654.2);
  ctx4.bezierCurveTo(693.9, 652.0, 693.5, 648.4, 688.2, 648.2);
  ctx4.bezierCurveTo(681.1, 648.0, 605.8, 648.2, 605.8, 648.2);
  ctx4.bezierCurveTo(605.8, 648.2, 530.4, 648.0, 523.3, 648.2);
  ctx4.bezierCurveTo(518.5, 648.4, 517.9, 651.5, 518.6, 653.8);
  ctx4.closePath();
  gradient = ctx4.createLinearGradient(543.6, -251.1, 561.6, 9.9);
  gradient.addColorStop(0.00, "rgb(186, 187, 189)");
  gradient.addColorStop(0.24, "rgb(106, 106, 106)");
  gradient.addColorStop(0.63, "rgb(186, 187, 189)");
  gradient.addColorStop(1.00, "rgb(88, 88, 88)");
  ctx4.fillStyle = gradient;
  ctx4.fill();

  // compreflect/Group/Path
  ctx4.restore();
  ctx4.restore();
  ctx4.globalAlpha = alpha * 0.50;
  ctx4.beginPath();
  ctx4.moveTo(348.9, 736.7);
  ctx4.bezierCurveTo(352.2, 730.6, 359.7, 720.5, 366.9, 720.5);
  ctx4.lineTo(844.9, 720.5);
  ctx4.bezierCurveTo(852.1, 720.5, 858.6, 731.6, 863.3, 738.0);
  ctx4.lineTo(898.2, 792.5);
  ctx4.bezierCurveTo(864.3, 792.5, 311.1, 792.6, 310.9, 792.5);
  ctx4.lineTo(348.9, 736.7);
  ctx4.closePath();
  gradient = ctx4.createLinearGradient(898.2, 756.5, 310.9, 756.5);
  gradient.addColorStop(0.00, "rgb(177, 178, 180)");
  gradient.addColorStop(0.63, "rgb(192, 193, 195)");
  gradient.addColorStop(1.00, "rgb(187, 188, 189)");
  ctx4.fillStyle = gradient;
  ctx4.fill();

  // compreflect/Group/Compound Path
  ctx4.globalAlpha = alpha * 0.20;
  ctx4.beginPath();

  // compreflect/Group/Compound Path/Path
  ctx4.moveTo(844.1, 726.0);
  ctx4.lineTo(366.1, 726.0);
  ctx4.bezierCurveTo(361.3, 726.0, 359.9, 730.8, 355.4, 736.1);
  ctx4.bezierCurveTo(355.4, 736.1, 320.8, 789.0, 318.1, 792.5);
  ctx4.lineTo(886.7, 792.5);
  ctx4.bezierCurveTo(890.6, 796.2, 852.7, 734.7, 852.7, 734.7);
  ctx4.bezierCurveTo(849.4, 730.8, 848.8, 726.0, 844.1, 726.0);
  ctx4.closePath();

  // compreflect/Group/Compound Path/Path
  ctx4.moveTo(865.1, 792.5);
  ctx4.lineTo(346.2, 792.5);
  ctx4.lineTo(373.8, 743.1);
  ctx4.lineTo(836.3, 743.1);
  ctx4.lineTo(865.1, 792.5);
  ctx4.closePath();
  ctx4.fillStyle = "rgb(1, 1, 1)";
  ctx4.fill();
  ctx4.restore();
  ctx4.restore();

  // compback/Path
  ctx4.save();
  ctx4.beginPath();
  ctx4.moveTo(858.9, 559.1);
  ctx4.bezierCurveTo(858.9, 566.3, 853.0, 572.2, 845.8, 572.2);
  ctx4.lineTo(367.9, 572.2);
  ctx4.bezierCurveTo(360.7, 572.2, 354.8, 566.3, 354.8, 559.1);
  ctx4.lineTo(355.7, 246.0);
  ctx4.bezierCurveTo(355.7, 240.0, 362.5, 236.0, 369.7, 236.0);
  ctx4.lineTo(846.7, 237.0);
  ctx4.bezierCurveTo(853.9, 237.0, 860.7, 242.8, 860.7, 250.0);
  ctx4.lineTo(858.9, 559.1);
  ctx4.closePath();
  gradient = ctx4.createLinearGradient(354.8, 404.1, 860.7, 404.1);
  gradient.addColorStop(0.00, "rgb(177, 178, 180)");
  gradient.addColorStop(0.63, "rgb(192, 193, 195)");
  gradient.addColorStop(1.00, "rgb(187, 188, 189)");
  ctx4.fillStyle = gradient;
  ctx4.fill();
  ctx4.restore();

  // compscreen/Path
  ctx4.save();
  ctx4.beginPath();
  ctx4.moveTo(845.8, 556.9);
  ctx4.lineTo(371.9, 556.9);
  ctx4.lineTo(371.9, 253.4);
  ctx4.lineTo(845.8, 253.4);
  ctx4.lineTo(845.8, 556.9);
  ctx4.closePath();
  ctx4.fill();
  ctx4.restore();

  // compframe/Compound Path
  ctx4.save();
  ctx4.beginPath();

  // compframe/Compound Path/Path
  ctx4.moveTo(846.8, 241.0);
  ctx4.lineTo(368.9, 241.0);
  ctx4.bezierCurveTo(364.1, 241.0, 360.2, 244.9, 360.2, 249.7);
  ctx4.lineTo(360.2, 557.4);
  ctx4.bezierCurveTo(360.2, 562.2, 364.1, 566.1, 368.9, 566.1);
  ctx4.lineTo(846.8, 566.1);
  ctx4.bezierCurveTo(851.6, 566.1, 855.5, 562.2, 855.5, 557.4);
  ctx4.lineTo(855.5, 249.7);
  ctx4.bezierCurveTo(855.5, 244.9, 851.6, 241.0, 846.8, 241.0);
  ctx4.closePath();

  // compframe/Compound Path/Path
  ctx4.moveTo(839.1, 549.0);
  ctx4.lineTo(376.6, 549.0);
  ctx4.lineTo(376.6, 258.1);
  ctx4.lineTo(839.1, 258.1);
  ctx4.lineTo(839.1, 549.0);
  ctx4.closePath();
  ctx4.fillStyle = "rgb(1, 1, 1)";
  ctx4.fill();
  ctx4.strokeStyle = "rgb(102, 102, 102)";
  ctx4.stroke();
  ctx4.restore();

  // compshine/Path
  ctx4.save();
  ctx4.globalAlpha = alpha * 0.29;
  ctx4.beginPath();
  ctx4.moveTo(855.6, 241.3);
  ctx4.lineTo(381.7, 241.3);
  ctx4.lineTo(382.0, 258.4);
  ctx4.bezierCurveTo(507.1, 328.3, 722.2, 427.3, 855.6, 491.0);
  ctx4.lineTo(855.6, 241.3);
  ctx4.closePath();
  gradient = ctx4.createLinearGradient(562.0, 358.3, 899.9, 367.3);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(187, 188, 189)");
  ctx4.fillStyle = gradient;
  ctx4.fill();
  ctx4.restore();

}


init();

大変申し訳ありません。ヘルプや推奨事項は大歓迎です！

4

1 に答える 1

0

やってみました

layer4.width = window.innerWidth;
layer4.height = window.innerHeight;

? キャンバスが描画される前にコードを実行する必要があることに注意してください。そうしないと、要素が歪む可能性があります。

于 2013-03-07T00:32:20.517 に答える