class Entity {
constructor(name, type = 'player') {
this.name = name,
this.type = type
}
newObject(name, ...pvals) {
this[name] = {}
if (pvals) {
for (var i = 0; i < pvals.length; i += 2) {
this[name][pvals[i]] = pvals[i + 1]
}
}
}
}
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
canvas.height = window.innerHeight - 20
canvas.width = window.innerWidth
var frame = new Entity('frame', 'game-object')
var button = new Entity('button', 'player-component')
const radius = 70
var speed = 3
frame.newObject('$', 'r', radius)
button.newObject('$', 'r', radius / 3)
function updateFrame() {
ctx.fillStyle = 'black'
ctx.arc((canvas.width / 2), (canvas.height / 2), frame.$.r, 0, Math.PI * 2)
ctx.fill()
ctx.fillStyle = 'red'
ctx.arc((canvas.width / 2), (canvas.height / 2), button.$.r, 0, Math.PI * 2)
ctx.fill()
}
updateFrame()<canvas></canvas>내가 아는 한 캔버스 중앙에 큰 검은색 원이 인쇄되고 그 위에 빨간색 작은 원이 인쇄되어야 합니다. 그러나 그것은 단지 큰 빨간 원을 인쇄합니다. 나는 그것을 이해할 수 없습니다.
@Teemu가 "경로 시작" 주석에서 지적한 것처럼 ctx.beginPath()색상을 변경할 때 호 사이 를 사용해야 합니다.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath#examples
문제를 보여주기 위해 많은 코드를 단순화했습니다. 문제를 해결할 때 동일한 작업을 수행해야 class Entity합니다.
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.fillStyle = 'black'
ctx.arc(50, 50, 20, 0, Math.PI * 2)
ctx.fill()
ctx.beginPath()
ctx.fillStyle = 'red'
ctx.arc(50, 50, 10, 0, Math.PI * 2)
ctx.fill()<canvas></canvas>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다