如何為鑲邊框創建html5畫布？

Question

我正在嘗試創建下面的畫布。

我的代碼如下。 但是我很難讓畫布看起來像上面的截圖。 誰可以幫助我呢？

謝謝

 <html> <canvas id="gameCanvas" width="800" height="600"></canvas> <script> var canvas; var canvasContext; window.onload = function() { canvas = document.getElementById('gameCanvas'); canvasContext = canvas.getContext('2d'); canvasContext.fillStyle = 'blue'; canvasContext.fillRect(0,0,canvas.width,canvas.height); canvasContext.fillStyle = 'grey'; canvasContext.fillRect(355,350,120,90); canvasContext.fillStyle = 'grey'; canvasContext.fillRect(190,350,120,90); canvasContext.fillStyle = 'grey'; canvasContext.fillRect(520,350,120,90); canvasContext.fillStyle = 'grey'; canvasContext.fillRect(355,200,120,90); canvasContext.fillStyle = 'grey'; canvasContext.fillRect(190,200,120,90); canvasContext.fillStyle = 'grey'; canvasContext.fillRect(520,200,120,90); } </script> </html>

Answer 1

嘗試這樣的事情，使用一個函數繪制一個具有你想要的邊框的矩形。 訣竅是使用.rect而不是fillRect以便您可以在之后立即使用.stroke() 。

<html>
  <canvas id="gameCanvas" width="800" height="600"></canvas>

  <script>
    function draw_bordered_rect(context, x, y, w, h) {
      context.rect(x, y, w, h);
      context.fillStyle = "grey";
      context.fill();

      context.lineWidth = 3;
      context.strokeStyle = "lightblue";
      context.stroke();
    }

    window.onload = function() {
      canvas = document.getElementById('gameCanvas');
      canvasContext = canvas.getContext('2d');
      canvasContext.fillStyle = 'blue';
      canvasContext.fillRect(0, 0, canvas.width, canvas.height);

      canvasContext.font = '25pt Arial';
      canvasContext.textAlign = 'center';

      //drop shadow 2px to the left and 2px below the white text
      canvasContext.fillStyle = "black";
      canvasContext.fillText('CHOOSE A SCENE TO COLOR', canvas.width/2-2, 82);

      //actual text ontop of the drop shadow text
      canvasContext.fillStyle = 'white';
      canvasContext.fillText('CHOOSE A SCENE TO COLOR', canvas.width/2, 80);


      draw_bordered_rect(canvasContext, 355, 350, 120, 90);
      draw_bordered_rect(canvasContext, 190, 350, 120, 90);
      draw_bordered_rect(canvasContext, 520, 350, 120, 90);
      draw_bordered_rect(canvasContext, 355, 200, 120, 90);
      draw_bordered_rect(canvasContext, 190, 200, 120, 90);
      draw_bordered_rect(canvasContext, 520, 200, 120, 90);

    }

  </script>

</html>

看起來像：

Answer 2

.fillRect創建一個填充的顏色區域。 但是， .rect會創建一個“形狀”，然后您可以使用.fill()和.stroke()方法。

在下面的示例中，如果將創建轉換為循環以簡潔起見

var canvas;
var canvasContext;

window.onload = function() {
    canvas = document.getElementById('gameCanvas');
    canvasContext = canvas.getContext('2d');
    canvasContext.fillStyle = 'blue';
    canvasContext.fillRect(0,0,canvas.width,canvas.height);
    var height = 90;
    var width = 120;
    var leftOffset = 190;
    var topOffset = 200;
    for(var x = 0; x < 6; x++){
        canvasContext.beginPath();
        canvasContext.rect(leftOffset,topOffset,width,height);
        canvasContext.fillStyle = 'grey';
        canvasContext.fill();
        canvasContext.lineWidth = 4;
        canvasContext.strokeStyle = 'lightblue';
        canvasContext.stroke();
        leftOffset += 165;
        if(x === 2){
            leftOffset = 190;
            topOffset = 350;
        }
    }
}

的jsfiddle

關於HTML5 Canvas矩形的本教程非常方便

要添加文本，您可以在rect創建循環之后（或之前）附加以下內容

canvasContext.beginPath();
canvasContext.font = '20pt Arial';
canvasContext.textAlign = 'center';
canvasContext.fillStyle = 'white';
canvasContext.shadowColor = 'black';
canvasContext.shadowOffsetX = 4;
canvasContext.shadowOffsetY = 4;
canvasContext.fillText('CHOOSE A SCENE TO COLOR', canvas.width/2,55);

更新后的

文本對齊，文本陰影和文本的教程。

Answer 3

我有一些代碼來設計HTML5畫布框。 我想你應該嘗試這個，我希望它能幫助你設計你的帆布盒。 我認為你應該使用JavaScript mehtod context.fillRect因為我在這里給你Js Fidler Lind

HTML代碼

<canvas id="myCanvas" width="500" height="400">
    <!-- Insert fallback content here -->
</canvas>

JavaScript代碼

var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");

// Set rectangle and corner values
var rectX = 50;
var rectY = 50;
var rectWidth = 100;
var rectHeight = 100;
var cornerRadius = 20;

// Reference rectangle without rounding, for size comparison
context.fillRect(200, 50, rectWidth, rectHeight);

// Set faux rounded corners
context.lineJoin = "round";
context.lineWidth = cornerRadius;

// Change origin and dimensions to match true size (a stroke makes the shape a bit larger)
context.strokeRect(rectX+(cornerRadius/2), rectY+(cornerRadius/2), rectWidth-cornerRadius, rectHeight-cornerRadius);
context.fillRect(rectX+(cornerRadius/2), rectY+(cornerRadius/2), rectWidth-cornerRadius, rectHeight-cornerRadius);

// You can do the same thing with paths, like this triangle
// Remember that a stroke will make the shape a bit larger so you'll need to fiddle with the
// coordinates to get the correct dimensions.
context.beginPath();
context.moveTo(400, 60);
context.lineTo(440, 140);
context.lineTo(360, 140);
context.closePath();
context.stroke();
context.fill();

這個javascript代碼將設計帆布盒就像下面的g] iven圖像

如何為鑲邊框創建html5畫布？

問題描述

3 個解決方案

解決方案1
0 2017-01-13 04:51:52

解決方案2
0 已采納 2017-01-13 04:53:21

解決方案3
0 2017-01-13 05:23:53

如何為鑲邊框創建html5畫布？

問題描述

3 個解決方案

解決方案1 0 2017-01-13 04:51:52

解決方案2 0 已采納 2017-01-13 04:53:21

解決方案3 0 2017-01-13 05:23:53

解決方案1
0 2017-01-13 04:51:52

解決方案2
0 已采納 2017-01-13 04:53:21

解決方案3
0 2017-01-13 05:23:53