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矩形上的这个tutorial非常方便

要添加文本，您可以在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);

<强> UPDATED FIDDLE

text align，text shadow和text的教程。

Answer 3

我有一些代码来设计HTML5中的画布框。我想你应该尝试这个，我希望它能帮助你设计你的帆布盒。我认为你应该使用JavaScript mehtod context.fillRect，因为我正在给你Js Fidler Lind here

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 个答案: