如何为边框创建html5画布？

用户名

我正在尝试在画布下创建。

我的代码如下。但我无法使画布看起来像上面的屏幕截图。有人可以帮我吗？

虽然谢谢

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

哈克斯顿

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

更新场

文本对齐，文本阴影和文本的教程。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。