遊びながら学ぶHTML5(1) Canvasの実装方法_html5チュートリアルスキル

1. タグ

HTML5 では、新しい タグが導入され、すべてのグラフィック描画が表示されます。このキャンバスに。このタグにより、ブラウザのグラフィックス パフォーマンスは大幅に向上しました。Flash と SilverLight は脅威に感じられますか?

ニュース リンク: Google は、Chrome 7 ブラウザが 60 倍高速になると主張しています。

コードをコピーします

コードは次のとおりです。 :

お使いのブラウザはキャンバスをサポートしていません。 tag

タグは、幅と高さを設定し、背景色や境界線を設定できます。 CSS を介してスタイルなどを待機します。

タグについて詳しくは、こちらをご覧ください。

タグの中間のコンテンツは、ユーザーのブラウザが タグをサポートしていない場合、このコンテンツが表示されます。の場合、このコンテンツは無視されます。

上記の コードは次のように表示されます:

お使いのブラウザは Canvas タグをサポートしていません

IE ブラウザを使用している場合は、次の操作のみが可能です。表示する ヒントを取得します。Google Chrome または Firefox を使用している場合は、赤い四角形の領域が表示されます。
2. コンテキストのレンダリング
実際、Windows プログラミングを試したことのある学生は、Windows で描画する前に、何もできないことを知っています。最初にデバイス コンテキスト DC を取得する必要があり、 タグで描画するには、最初にレンダリング コンテキストを取得する必要があります。グラフィックスは最初に画面に直接描画されず、次にコンテキスト (Context) に描画されてから画面に更新されます。 。
本題から外れました: なぜ「コンテキスト」などの複雑な概念を作成する必要があるのでしょうか?コンテキスト オブジェクトのおかげで、さまざまなグラフィック デバイスを私たちの目には同じように見せることができます。描画だけに集中すればよく、その他の作業はオペレーティング システムとブラウザに任せることができます。具体的なものを統一された抽象概念に変換し、それによって私たちの負担を軽減します。
コンテキストの取得は非常に簡単で、次の 2 行のコードが必要です。
var Canvas = document.getElementById('tutorial');
var ctx = Canvas.getContext('2d'); 🎜>最初に Canvas オブジェクトを取得し、次に Canvas オブジェクトの getContext メソッドを呼び出します。このメソッドは現在パラメータ「2d」のみを渡すことができます。近い将来、パラメータ「3d」もサポートされる可能性があります。つまり、楽しみにしましょう。
getContext メソッドは、レンダリング コンテキスト オブジェクトである CanvasRenderingContext2D オブジェクトを返します。詳細については、
こちらでいくつかの描画メソッドを参照してください。

3. ブラウザのサポート サポートされていないブラウザで代替コンテンツを表示することに加えて、スクリプトを使用してブラウザが Canvas をサポートしているかどうかを確認することもできます。方法は非常に簡単です。 getContext 関数が存在するかどうかにかかわらず、コードは次のとおりです:

コードをコピーしますコードは次のとおりです:

var Canvas = document.getElementById('tutorial');
if (canvas.getContext){
alert("サポート タグ")
};
alert("タグはサポートされていません");
}



四、一个小例子
下面将用 HTML5 的绘图功能演示一个上下移动的线条的例子， 具体的代码将在后续内容中给出

<canvas style="background-color: black" id="move_line" height="200" width="400">你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas> <script type="text/javascript"> var canvas = document.getElementById('move_line'); var ctx=canvas.getContext("2d"); //上下移动的直线 var width=400; var height=200; var y=0 var dir=1; ctx.strokeStyle = "rgb(255,0,0)"; function draw(){ ctx.clearRect(0,0,width,height) ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(width-1,y); ctx.stroke(); y=y+dir; if((y==0)||(y==(height-1))) dir=dir*(-1); } </script><p><input onclick="interval=setInterval(draw,10);" value="开始" type="button"> <input onclick="clearInterval(interval);" value="停止" type="button"> </p>
提示：您可以先修改部分代码再运行

你的浏览器不支持 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器