10

スプライトシートを使用してアニメーション化するスプライトがあります。彼はたった16x16ですが、私は彼をすべてのピクセルの良さで約64x64にスケールアップしたいと思います！

代替テキスト

結果はひどいです、もちろんブラウザはそれをアンチエイリアシングしています。：/

ありがとう！

編集：cssは必要ありません、これが私の描画関数です。

function drawSprite(offsetx:number,offsety:number,posx:number,posy:number){
    ctx.drawImage(img, offsetx*32, offsety*32, 32, 16, posx*32, posy*8, 128, 32);
}

ここでちょっと動作しているのを見てください（codepen）

4

2 に答える 2

9

誰かが（私のように）これに再び遭遇した場合に備えて、Webkitはの-webkit-optimize-contrast値をサポートしますimage-rendering。これは（現在）最近傍アップスケーリングの実装です。画像とキャンバスの両方に適用できます。

これがその方法の例です。

.nn128 {
    width: 128px;
    height: 128px;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
}

<canvas class="nn128" width="16" height="16"></canvas>
<img src="path/to/small/image.png" alt="Small image" class="nn128">

この設定では、WebkitSafariとGecko/ Firefoxの両方が、16x16のキャンバススペースと小さな画像を最近傍アルゴリズムで128x128に拡大します。

更新答えは当初、 Webkitブラウザがこれをサポートしていると述べていました。実際、2011年12月24日の時点では、ChromiumバグトラッカーのIssue 106662に記載されているように、MacOS上のSafariとMacOS上のChromeで動作しますが、Chrome one Windowsでは動作しません（Windows上のSafariは検証されていません）。字句的には、Windows上のChrome-webkit-optimize-contrastはCSSスタイルシートの値を受け入れますが、効果はありません。いつかは機能することを期待しており、この方法は最近傍のアップスケーリングを取得する正しい方法ですが、今のところ、この方法を使用すると、WindowsChromeユーザーはぼやけた状態で生活する必要があります。

于 2011-08-24T06:21:12.733 に答える
1

Firefoxでは、これを使用できます。

canvas {
  image-rendering: -moz-crisp-edges;
}

しかし、私が知っている限り、他のすべてのブラウザについては、ほとんど運が悪いです。これを回避する1つの方法は、Photoshop（またはその他）でスプライトを64x64にスケールアップしてから、キャンバスでスケールダウンして使用することです。このようにして、少なくとも「スケールアップ」したときに画像がぼやけることはありません。それでも、最近傍の良さのような純粋なモード7を正確に提供することはできません。

imageDataオブジェクトを使用して、独自のスケーリングコードを記述できます。そうすると、パフォーマンスが大幅に低下しますが、16x16の画像の場合、それほど重要ではない可能性があります。

于 2010-07-22T01:51:43.090 に答える