キャンバスにぼんやりしたsvg

キャンバスでSVGが正しく拡大縮小されないのはなぜですか（ピクセル化されてぼやけています）私は何が間違っていますか？キャンバスにぼんやりしたsvg

私が欲しいのは、キャンバスのサイズにかかわらずアスペクト比を維持するためのSVG画像です。ぼやけていません。

var canvas = document.getElementById("screen"), 
 
    ctx = canvas.getContext("2d"); 
 

 
var img = new Image(); 
 
img.src = "http://imgh.us/perso.svg"; 
 
img.onload = function() { 
 
    ctx.drawImage(img, 0, 0); 
 
}

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#screen { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css" /> 
 
    <title>Game</title> 
 
</head> 
 

 
<body> 
 
    <canvas id="screen"></canvas> 
 
    <script type="text/javascript" src="js/game.js"></script> 
 
</body> 
 

 
</html>

出典

2016-06-27 newbStudent

を得るのだろうか？キャンバス要素に入ると、ラスタライズされます。もはやScalable ** Vector ** Graphicではなく、ピクセルです。 SVG要素をDOM自体に配置するだけです。 – zero298

私はキャンバスとSVG画像を使ってゲームを作りたがっていました。私はそれがまだSVGだろうと思った...私はキャンバスが本当に何であるかについてさらに読む必要があると思う。ご清聴ありがとうございます！ – newbStudent

私はあなたを抑えようとはしていません。あなたがキャンバスでSVGを使いたい本当の理由があるなら、それをあなたの質問の詳細として追加するべきです。たぶん[この回答]を見てください（http://stackoverflow.com/a/3769883/691711） – zero298

あなたの問題は、それがキャンバスでだ、SVGではありません。

キャンバスのデフォルトサイズは300×150です。まずスクリプトを実行すると、300×150のキャンバスコンテキストが作成されます。その後、CSSが表示され、キャンバス要素がそれぞれ100％にスケールされます方向。コンテキストはまだ300×150です。これにより、すべてのピクセルが1ピクセル以上の領域を占有します。 CSSの後にスクリプトを実行するか、またはjavascriptを使用してキャンバスのサイズを変更する必要があります。

出典

2016-06-27 19:39:13

あなたの答えをありがとう！私はCSSの後にjsを実行する方法を見てみるか、単に別の解決策を探します。 – newbStudent

@newbStudent別のファイルにjsがある場合は、単に 'defer =" defer "'プロパティをスクリプト要素 –

@newbStudentに追加するだけです。解決策はキャンバスの 'width'を設定することですと 'height'プロパティです。あなたが設定していなければ、CSSがロードされた後にスクリプトを実行するために何も変更されません。 – Kaiido

は、私はあなたがdiv内のSVGを入れ、その後のdivをぼかすことができると思うので、それはなぜあなたはキャンバスの中にそれを入れているのと同じ効果

https://jsfiddle.net/moongod101/q3qh78xd/

出典

2016-06-28 16:34:53

実際、私はぼやけた効果を避けたかったのです。しかし、あなたの答えをありがとう！ – newbStudent

キャンバスにぼんやりしたsvg

答えて

関連する問題