canvasラベルのwidthとheightとstyle.それは何だ?heightの違い
5187 ワード
HTML 5 Canvas自体の特殊性のため、その大きさの設定にはこだわりがあります.まず、Canvasの一般的な書き方を見てみましょう.
HTML 5ラベル使用コード表示
HTMLコード
JavaScriptコード
Canvasサイズの変更には3つの方法があります
方法1:CSSスタイルによってCanvas要素を制御し、具体的なコードは以下の通りである.
ここではcanvasに枠線スタイルを追加しましたが、要素の変化を簡単に見るためです.
方法2:canvasラベル内でwidthとheightを直接定義します.具体的なコードは以下の通りです.
方法3:JSコードにwidthとheightを設定し、var ctx=mycanvas.getContext(‘2d’);以下のコードを追加します.
コードのmycanvasはvar mycanvas=documentを前に通過します.getElementById(‘mycanvas’);取得したcanvasオブジェクトは、これを状況に応じて置き換えればよい.
2つの問題が来て、もしあなたがこの2つの方法をテストしたことがあるならば、CSSスタイルの制御を通じてCanvasラベル内でwidth(幅)とheight(高さ)を直接定義することと、彼らがブラウザに表示する効果は違います.CSSスタイルでコントロールされているcanvasの内容は自動的に拡大されます.Canvasタグの内容定義のwidthとheightはできません.これはなぜですか.
元Canvasラベルには、要素自体と要素描画表面(drawing surface)の2つのものが含まれていました.彼らはそれぞれのサイズを持っています.canvasのサイズは、実際には要素自体のサイズと要素描画表面のサイズの両方を指します.Canvas要素自体と要素描画面のデフォルトのサイズは300 x 150ピクセルです.
前述した2つのCanvasサイズを設定する方法の違いは、CSSでCanvasサイズを設定する場合、Canvas要素自体のサイズのみを設定し、要素描画表面のサイズを設定しないため、要素描画表面はデフォルトのサイズ300 x 150ピクセルである.Canvas要素自体のサイズが要素描画面と異なる場合、ブラウザは要素描画面を要素サイズに合わせてスケールします.上に見える2つの異なる効果が現れますcanvasラベル内でwidthとheightを直接定義するのは異なり、要素自体のサイズと要素描画表面のサイズを同時に定義します.JSで定義するのはcanvasタグ内で定義するのと同じ効果です.
【記事転載元:クラウドネットhttp://yunkus.com/article/html5/281.html】
HTML 5ラベル使用コード表示
HTMLコード
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas width（ ） height（ ）title>
<style>
canvas{border: 1px solid #ccc}
style>
head>
<body>
<canvas id="mycanvas"> Canvas, ！canvas>
<script src="./js/canvas.js">script>
body>
html>JavaScriptコード
window.onload = function(){
var mycanvas = document.getElementById('mycanvas');
var ctx = mycanvas.getContext('2d');
ctx.font ='28px Arial';
ctx.fillStyle = '#0099CC';
ctx.fillText(' - ',35,30);
}Canvasサイズの変更には3つの方法があります
方法1:CSSスタイルによってCanvas要素を制御し、具体的なコードは以下の通りである.
canvas{border: 1px solid #ccc;width: 600px;height: 300px;}ここではcanvasに枠線スタイルを追加しましたが、要素の変化を簡単に見るためです.
方法2:canvasラベル内でwidthとheightを直接定義します.具体的なコードは以下の通りです.
<canvas id="mycanvas" width='580' height='350' > Canvas, ！canvas>方法3:JSコードにwidthとheightを設定し、var ctx=mycanvas.getContext(‘2d’);以下のコードを追加します.
mycanvas.width = 580;
mycanvas.height = 350;コードのmycanvasはvar mycanvas=documentを前に通過します.getElementById(‘mycanvas’);取得したcanvasオブジェクトは、これを状況に応じて置き換えればよい.
2つの問題が来て、もしあなたがこの2つの方法をテストしたことがあるならば、CSSスタイルの制御を通じてCanvasラベル内でwidth(幅)とheight(高さ)を直接定義することと、彼らがブラウザに表示する効果は違います.CSSスタイルでコントロールされているcanvasの内容は自動的に拡大されます.Canvasタグの内容定義のwidthとheightはできません.これはなぜですか.
元Canvasラベルには、要素自体と要素描画表面(drawing surface)の2つのものが含まれていました.彼らはそれぞれのサイズを持っています.canvasのサイズは、実際には要素自体のサイズと要素描画表面のサイズの両方を指します.Canvas要素自体と要素描画面のデフォルトのサイズは300 x 150ピクセルです.
前述した2つのCanvasサイズを設定する方法の違いは、CSSでCanvasサイズを設定する場合、Canvas要素自体のサイズのみを設定し、要素描画表面のサイズを設定しないため、要素描画表面はデフォルトのサイズ300 x 150ピクセルである.Canvas要素自体のサイズが要素描画面と異なる場合、ブラウザは要素描画面を要素サイズに合わせてスケールします.上に見える2つの異なる効果が現れますcanvasラベル内でwidthとheightを直接定義するのは異なり、要素自体のサイズと要素描画表面のサイズを同時に定義します.JSで定義するのはcanvasタグ内で定義するのと同じ効果です.
【記事転載元:クラウドネットhttp://yunkus.com/article/html5/281.html】