ホームページ > 記事 > ウェブフロントエンド > HTML5のキャンバスの幅と高さを
HTML5のキャンバスの幅と高さを
- 黄舟オリジナル
- 2017-03-21 16:06:021534ブラウズ
以前はcanvasを使って絵を描くときは、常に幅と高さをcanvasタグに直接書いていましたが、なぜ幅と高さを直接記述する必要があるのかを調べたことがありませんでした。これはさまざまな例で書かれているためです。今日、Sir Wang は質問を提起しました。幅と高さが c9ccee2e6ea535a969eb3f532ad9fe89 で記述されている場合、どのような違いがあるかを見てみましょう。私自身も次のことを試してみましたが、確かに問題がありました。
まずコードを見てみましょう:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
<style type="text/css">
body{margin:0;}
canvas{margin:20px;
/*width: 400px;
height: 300px;*/
}
</style>
</head>
<body onload="draw()">
<canvas id="canvas" width=400 height=300 style="border:1px solid #f00;"></canvas>
<script>
function draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.beginPath();
context.moveTo(20,20);
context.lineTo(200,100);
context.lineWidth=5;
context.stroke();
}
</script>
</body>
</html>1. 5ba626b379994d53f7acf72a64f9b697 に直接書き込んだ場合の効果:
2. Canvas>、width: 400; High: 300; c9ccee2e6ea535a969eb3f532ad9fe89 での書き込みの効果:
2 つの効果が異なるのはなぜですか?
他のタグと同様に、キャンバスも CSS を通じてスタイル設定できます。ただし、ここで注意する必要があるのは、キャンバスのデフォルトの幅と高さが 300px * 150px であることです。CSS でキャンバスの幅と高さを定義すると、実際には 300px * 150px の幅と高さでキャンバスが拡張されます。キャンバスに描画すると、得られるグラフィックスは変形の影響を受ける場合があります。したがって、canvas 上に描画する場合、 は Canvas タグ内で幅と高さ を直接定義する必要があります。
以上がHTML5のキャンバスの幅と高さを
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。