如何为镶边框创建html5画布？
[英]How to create html5 canvas for bordered boxes?
问题描述
I am trying to create below canvas. 
我正在尝试创建下面的画布。
my code is below. 我的代码如下。 but I am having trouble to make the canvas look the like the screenshot above. 但是我很难让画布看起来像上面的截图。 can anyone help me then? 谁可以帮助我呢？
thanks though 谢谢
<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>
3 个解决方案
解决方案1
0 2017-01-13 04:51:52
Try something like this, use a function to draw a rectangle with exactly the border you want. 尝试这样的事情，使用一个函数绘制一个具有你想要的边框的矩形。 The trick is to use .rect instead of fillRect so that you can use .stroke() immediately after. 诀窍是使用.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>
Looks like: 看起来像：
解决方案2
0 已采纳 2017-01-13 04:53:21
.fillRect creates a filled region of color. .fillRect创建一个填充的颜色区域。 However, .rect creates a "shape" that you can then use the .fill() and .stroke() methods upon. 但是， .rect会创建一个“形状”，然后您可以使用.fill()和.stroke()方法。
In the below example if converted creation into a loop for brevity 在下面的示例中，如果将创建转换为循环以简洁起见
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;
}
}
}
This tutorial on HTML5 Canvas rectangles is very handy 关于HTML5 Canvas矩形的本教程非常方便
To add the text, you would append the following after (or before) the rect creating loop 要添加文本，您可以在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);
Tutorials for text align , text shadow , and text . 文本对齐 ， 文本阴影和文本的教程。
解决方案3
0 2017-01-13 05:23:53
I have some code to design canvas box in HTML5 . 我有一些代码来设计HTML5画布框。 I think you should try this one, I hope it will help you to design your canvas box. 我想你应该尝试这个，我希望它能帮助你设计你的帆布盒。 I think you should use JavaScript mehtod context.fillRect as i am giving you Js Fidler Lind here 我认为你应该使用JavaScript mehtod context.fillRect因为我在这里给你Js Fidler Lind
HTML Code HTML代码
<canvas id="myCanvas" width="500" height="400">
<!-- Insert fallback content here -->
</canvas>
JavaScript Code 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();
This javascript code will design canvas box just like below g]iven image 这个javascript代码将设计帆布盒就像下面的g] iven图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.