如何使用 javascript 在画布中获取组件元素周围的边框？
我正在使用 JS 创建一个画布，然后在所述画布中创建一个组件，并且我希望该组件周围有蓝色边框。我可以用 javascript 或 CSS 来做到这一点吗？
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 10, 120);
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
</script>
<p>We have added a component to our game, a red square!</p>
</body>
</html>
这是代码的简化版本。我试图为名为 myGamePiece 的组件提供边框。
慕娘93253243回答
-
一只斗牛犬
可以使用以下方式实现边框stroke()function component(width, height, color, x, y) { this.width = width; this.height = height; this.x = x; this.y = y; ctx = myGameArea.context; ctx.rect(this.x, this.y, this.width, this.height); ctx.fillStyle = color; ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = "black"; ctx.stroke();} -
当年话下
由于您正在开发游戏，因此您可能希望根据游戏逻辑更改颜色属性。最好使用 JavaScript 来实现此目的。在之前插入以下行 -ctx.fillStyle = color;它应该可以正常工作。ctx.strokeStyle = 'blue'; ctx.strokeRect(this.x, this.y, this.width, this.height);这是相同的代码 - https://codepen.io/viveksonkar19n/pen/LYZXeEP -
HUX布斯
document.getElementById('your-component').style.border = 'parameters';您可以通过在该片段中的样式后添加正确的单词来更改背景、文本颜色等。或者，你可以这样做.your-component { border-style: solid; border-color: blue; }在CSS中
随时随地看视频慕课网APP
相关分类
JavaScript