我想讓畫布 PNG 檔案在匯出時不會被壓扁（原始大小：寬度：480 像素，高度：360 像素。）并且加上藍色背景顏色（顏色：#85c9ff）。來源：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flippy in JavaScript! - Replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body onload="startGame()">
<canvas id="flippyGoesHere"></canvas>
<center>
<button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">UP</button><br><br>
<div>
<button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">LEFT</button>
<button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button>
<br>
<br>
</div>
<button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">DOWN</button>
<br>
<br>
<button onclick="exportAsPng()">EXPORT AS IMAGE</button>
<br>
<br>
</center>
<a href="" download="canvas.png" id="imgLink"></a>
<script src="script.js"></script>
</body>
</html>
JS：
var myGamePiece;
var imgLink = document.getElementById("imgLink")
function startGame() {
myGamePiece = new component(20, 10, "/flippy.svg", 140, 70, "image");
myGameArea.start();
myGameArea.context.fillStyle = "#85c9ff"
myGameArea.context.fillRect(0, 0, myGameArea.canvas.width, myGameArea.canvas.height)
}
var myGameArea = {
canvas: document.getElementById("flippyGoesHere"),
start: function () {
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
},
clear: function () {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop: function () {
clearInterval(this.interval);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function () {
ctx = myGameArea.context;
if (type == "image") {
ctx.drawImage(this.image,
this.x,
this.y,
this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function () {
this.x = this.speedX;
this.y = this.speedY;
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.newPos();
myGamePiece.update();
}
function moveup() {
myGamePiece.speedY = -1;
}
function movedown() {
myGamePiece.speedY = 1;
}
function moveleft() {
myGamePiece.speedX = -1;
}
function moveright() {
myGamePiece.speedX = 1;
}
function clearmove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
function exportAsPng() {
imgLink.setAttribute("href", myGameArea.canvas.toDataURL())
imgLink.click()
}
和CSS，我不知道為什么：
body {
margin: 0;
}
a#imgLink {
display: none;
}
a#imgLink::before {
content: attr(href);
}
canvas#flippyGoesHere {
width: 480px;
height: 360px;
background-color: #85c9ff;
}
button { /* For all buttons! */
cursor: pointer;
}
演示在這里！
這是結果影像，當烏龜不動時：
uj5u.com熱心網友回復：
可以看到畫布的寬高不是你在CSS中指定的：myGameArea.canvas.width是300，myGameArea.canvas.height是150。問題是畫布的實際大小和它的顯示大小不一樣。
在 HTML 中設定畫布大小顯示匯出的影像與畫布相同。
<canvas id="flippyGoesHere" width="480" height="360"></canvas>
背景顏色的問題也出在 CSS 中。在 CSS 中指定背景顏色只會顯示該顏色，不會在畫布中呈現它。
用背景顏色填充畫布（為了好的做法，洗掉background-colorCSS 中的 ）應該可以解決問題。
this.update = function () {
ctx = myGameArea.context;
ctx.fillStyle = "#85c9ff";
ctx.fillRect(0, 0, width, height);
// ...
}
uj5u.com熱心網友回復：
基于 KeroppiMomo 的回答......
也使用 myGameArea.clear() 方法為背景著色
var myGameArea = {
...
clear: function () {
myGameArea.context.fillStyle = "#85c9ff"
myGameArea.context.fillRect(0, 0, myGameArea.canvas.width,
myGameArea.canvas.height)
},
擺脫所有的 css for canvas#flippyGoesHere，這只是令人困惑的事情，因為它會影響畫布的顯示。
你可以像 KeroppiMomo 建議的那樣在 html 中設定畫布大小，或者你可以在 javascript 中設定它（也許在你的 startGame() 函式中）：
myGameArea.canvas.height = 500
myGameArea.canvas.width = 500
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/386916.html
標籤：javascript html css