Javascript 如何为边框框创建html5画布？_Javascript_Html

Javascript 如何为边框框创建html5画布？

javascript html

Javascript 如何为边框框创建html5画布？,javascript,html,Javascript,Html,我试图在画布下创建我的代码如下。但是我很难让画布看起来像上面的截图。那有人能帮我吗谢谢 var帆布； var canvasContext； window.onload=函数（）{ canvas=document.getElementById（'gameCanvas'）； canvasContext=canvas.getContext（'2d'）； canvasContext.fillStyle='blue'； canvasContext.fillRect（0,0，canvas.widt

我试图在画布下创建

我的代码如下。但是我很难让画布看起来像上面的截图。那有人能帮我吗

谢谢


var帆布；
var canvasContext；
window.onload=函数（）{
canvas=document.getElementById（'gameCanvas'）；
canvasContext=canvas.getContext（'2d'）；
canvasContext.fillStyle='blue'；
canvasContext.fillRect（0,0，canvas.width，canvas.height）；
canvasContext.fillStyle='grey'；
canvasContext.fillRect（355350120,90）；
canvasContext.fillStyle='grey'；
canvasContext.fillRect（190350120,90）；
canvasContext.fillStyle='grey'；
canvasContext.fillRect（520350120,90）；
canvasContext.fillStyle='grey'；
canvasContext.fillRect（355200120,90）；
canvasContext.fillStyle='grey'；
canvasContext.fillRect（190200120,90）；
canvasContext.fillStyle='grey'；
canvasContext.fillRect（520200120,90）；
}

尝试类似的方法，使用函数绘制一个与所需边框完全一致的矩形。诀窍是使用

.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>


函数draw_borned_rect（上下文、x、y、w、h）{
rect（x，y，w，h）；
context.fillStyle=“灰色”；
context.fill（）；
context.lineWidth=3；
context.strokeStyle=“浅蓝色”；
stroke（）；
}
window.onload=函数（）{
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'；
//将阴影2px放到左侧，将阴影2px放到白色文本下方
canvasContext.fillStyle=“黑色”；
canvasContext.fillText（'选择要着色的场景'，canvas.width/2-2，82）；
//放置阴影文本的顶部的实际文本
canvasContext.fillStyle='white'；
canvasContext.fillText（'选择要着色的场景'，canvas.width/2，80）；
画有边框的直线（canvasContext，355、350、120、90）；
绘制边界直线（画布上下文，19035012090）；
画有边框的直线（画布上下文，520、350、120、90）；
画有边框的直线（canvasContext，355200120，90）；
绘制边界直线（画布上下文，190、200、120、90）；
画有边框的直线（画布上下文，520、200、120、90）；
}

如下所示：

尝试类似的方法，使用函数绘制一个与所需边框完全相同的矩形。诀窍是使用

.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>


函数draw_borned_rect（上下文、x、y、w、h）{
rect（x，y，w，h）；
context.fillStyle=“灰色”；
context.fill（）；
context.lineWidth=3；
context.strokeStyle=“浅蓝色”；
stroke（）；
}
window.onload=函数（）{
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'；
//将阴影2px放到左侧，将阴影2px放到白色文本下方
canvasContext.fillStyle=“黑色”；
canvasContext.fillText（'选择要着色的场景'，canvas.width/2-2，82）；
//放置阴影文本的顶部的实际文本
canvasContext.fillStyle='white'；
canvasContext.fillText（'选择要着色的场景'，canvas.width/2，80）；
画有边框的直线（canvasContext，355、350、120、90）；
绘制边界直线（画布上下文，19035012090）；
画有边框的直线（画布上下文，520、350、120、90）；
画有边框的直线（canvasContext，355200120，90）；
绘制边界直线（画布上下文，190、200、120、90）；
画有边框的直线（画布上下文，520、200、120、90）；
}

看起来像：

.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;
        }
    }
}

和的教程。

.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;
        }
    }
}

和的教程。

我有一些代码可以在

HTML5

中设计画布框。我想你应该试试这个，我希望它能帮助你设计你的画布盒。我认为你应该使用

JavaScript

mehtod

context.fillRect

，就像我给你的一样

HTML代码

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

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代码将设计画布框，如下图所示

我有一些代码可以在

HTML5

中设计画布框。我想你应该试试这个，我希望它能帮助你设计你的画布盒。我认为你应该使用

JavaScript

mehtod

context.fillRect

，就像我给你的一样

HTML代码

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

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代码将设计画布框，如下图所示

好的，谢谢。但是文本呢？如何将文本放入画布？@DominicCobb，如果您想使用阴影，而不是重复的

。fillText

元素，请查看我的答案：）顺便问一下，我如何用不同的颜色填充这些框。应该添加什么代码？好的，谢谢。但是文本呢？如何将文本放入画布？@DominicCobb，如果您想使用阴影，而不是重复的

。fillText

元素，请查看我的答案：）顺便问一下，我如何用不同的颜色填充这些框