第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 javascript 在畫布中獲取組件元素周圍的邊框?

如何使用 javascript 在畫布中獲取組件元素周圍的邊框?

慕娘9325324 2023-07-29 15:14:30
我正在使用 JS 創(chuàng)建一個畫布,然后在所述畫布中創(chuàng)建一個組件,并且我希望該組件周圍有藍(lán)色邊框。我可以用 javascript 或 CSS 來做到這一點(diǎn)嗎?<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 的組件提供邊框。
查看完整描述

3 回答

?
一只斗牛犬

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超2個贊

可以使用以下方式實(shí)現(xiàn)邊框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();

}


查看完整回答
反對 回復(fù) 2023-07-29
?
當(dāng)年話下

TA貢獻(xiàn)1890條經(jīng)驗(yàn) 獲得超9個贊

由于您正在開發(fā)游戲,因此您可能希望根據(jù)游戲邏輯更改顏色屬性。最好使用 JavaScript 來實(shí)現(xiàn)此目的。

在之前插入以下行 -ctx.fillStyle = color;它應(yīng)該可以正常工作。

ctx.strokeStyle = 'blue';
ctx.strokeRect(this.x, this.y, this.width, this.height);

這是相同的代碼 - https://codepen.io/viveksonkar19n/pen/LYZXeEP


查看完整回答
反對 回復(fù) 2023-07-29
?
HUX布斯

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超6個贊

document.getElementById('your-component').style.border = 'parameters';

您可以通過在該片段中的樣式后添加正確的單詞來更改背景、文本顏色等?;蛘撸憧梢赃@樣做

.your-component {
border-style: solid;
border-color: blue;
}

在CSS中


查看完整回答
反對 回復(fù) 2023-07-29
  • 3 回答
  • 0 關(guān)注
  • 231 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號