Html 5学習シリーズ(五)Canvas図形描画API快速入門(2)
6212 ワード
Canvas図形描画API Demos
前回の記事では、CanvasのAPIで長方形をすばやく描く方法を説明しました.次に、Canvasの他のAPIについて説明します.線の描画、楕円の描画、画像の描画、画像処理などです.より良い読書効果を得るには老馬の独立したブログの住所をクリックしてください.
一、Canvas描画線
ContextオブジェクトのbeginPathメソッドは、パスの描画を開始することを示し、moveTo(x,y)メソッドはセグメントの始点を設定し、lineTo(x,y)メソッドはセグメントの終点を設定し、strokeメソッドは透明なセグメントにシェーディングするために使用されます.movetoとlinetoメソッドは複数回使用できます.最後に、closePathメソッドを使用して、現在の点から始点までの直線を自動的に描画し、閉じた図形を形成し、linetoメソッドを1回使用することを省くこともできます.
オンラインデモの表示
二、Canvas描画テキスト
ContextコンテキストオブジェクトのfillText(string,x,y)メソッドは、テキストの内容、始点のx座標、y座標の3つのパラメータを描画するために使用されます.使用する前に、fontでフォント、サイズ、スタイルを設定する必要があります(書き方はCSSのfont属性と似ています).これと同様にstrokeTextメソッドもあり、中空字を追加します.さらに、fillTextメソッドでは、すべてのテキストが1行に表示されるテキストブレークはサポートされていません.したがって、複数行のテキストを生成するには、複数のfillTextメソッドを呼び出すしかありません.
以下はコードDemoです.
オンラインデモの表示
早くやってみない?
四、Canvasが画像を描く
Canvasが絵を描くのは彼の大きな特徴かハイライトだろう.もちろんFileのAPIに合わせて、JSに匹敵するようになりました.では、次に画像をどのように描き、立体的な効果を出すかを説明します.
以下は、画像を描くDemoです.
早くやってみない?
五、まとめ
Canvasはやっと基本的な使い方を紹介しました.もちろん、本文は他のサイトの例をたくさん参考にしました.著者も基本的なエッセンス部分を羅列した.全体的にCanvasは画像やテキスト、形状を描くのは難しくなく、APIコードの上手さは基本的に初級です.しかし、これによってもたらされる非常に多くの可能性は、Html 5を本当に比類のないほど強くした.
もちろん本稿では、Canvas 3 Dの描画に関する内容は触れておらず、Canvasのグラデーションの描画、シャドウの描画、画像の処理などについては、読者が必要とする場合は、関連資料を検索したり、Html 5の最新の標準文書を直接読んだりすることができます.
参照:http://javascript.ruanyifeng.com/htmlapi/canvas.html
本明細書の永続アドレス:http://blog.itjeek.com/blogs/Html5-5-canvas2.html
前回の記事では、CanvasのAPIで長方形をすばやく描く方法を説明しました.次に、Canvasの他のAPIについて説明します.線の描画、楕円の描画、画像の描画、画像処理などです.より良い読書効果を得るには老馬の独立したブログの住所をクリックしてください.
一、Canvas描画線
ContextオブジェクトのbeginPathメソッドは、パスの描画を開始することを示し、moveTo(x,y)メソッドはセグメントの始点を設定し、lineTo(x,y)メソッドはセグメントの終点を設定し、strokeメソッドは透明なセグメントにシェーディングするために使用されます.movetoとlinetoメソッドは複数回使用できます.最後に、closePathメソッドを使用して、現在の点から始点までの直線を自動的に描画し、閉じた図形を形成し、linetoメソッドを1回使用することを省くこともできます.
<body>
<canvas id="demoCanvas" width="500" height="600">
</canvas>
<script type="text/javascript">
// id Canvas
var canvasDom = document.getElementById("demoCanvas");
// Canvas Dom Context
var context = canvasDom.getContext("2d");
context.beginPath(); //
context.moveTo(20, 20); // ， (20,20)
context.lineTo(200, 200); // (200,20)
context.lineTo(400, 20);
context.closePath();
context.lineWidth = 2.0; //
context.strokeStyle = "#CC0000"; //
context.stroke(); // ，
</script>
</body>
オンラインデモの表示
二、Canvas描画テキスト
ContextコンテキストオブジェクトのfillText(string,x,y)メソッドは、テキストの内容、始点のx座標、y座標の3つのパラメータを描画するために使用されます.使用する前に、fontでフォント、サイズ、スタイルを設定する必要があります(書き方はCSSのfont属性と似ています).これと同様にstrokeTextメソッドもあり、中空字を追加します.さらに、fillTextメソッドでは、すべてのテキストが1行に表示されるテキストブレークはサポートされていません.したがって、複数行のテキストを生成するには、複数のfillTextメソッドを呼び出すしかありません.
以下はコードDemoです.
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
// id Canvas
var canvasDom = document.getElementById("demoCanvas");
// Canvas Dom Context
var context = canvasDom.getContext("2d");
context.moveTo(200,200);
//
context.font = "Bold 50px Arial";
//
context.textAlign = "left";
//
context.fillStyle = "#005600";
// ，
context.fillText(" !", 10, 50);
//
context.strokeText("blog.itjeek.com!", 10, 100);
</script>
オンラインデモの
、Canvas
， ， ， ， ， 。 。Context arc ，arc x y ，radius ，startAngle endAngle （ ），anticlockwise （true） （false）。
Demo：
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
// id Canvas
var canvasDom = document.getElementById("demoCanvas");
// Canvas Dom Context
var context = canvasDom.getContext("2d");
context.beginPath();//
// （60,60） ，50 ， 0 360 （PI 180 ）， 。
context.arc(60, 60, 50, 0, Math.PI * 2, true);
context.lineWidth = 2.0;//
context.strokeStyle = "#000";//
context.stroke();// ， fill 。
</script>
オンラインデモの表示
早くやってみない?
四、Canvasが画像を描く
Canvasが絵を描くのは彼の大きな特徴かハイライトだろう.もちろんFileのAPIに合わせて、JSに匹敵するようになりました.では、次に画像をどのように描き、立体的な効果を出すかを説明します.
以下は、画像を描くDemoです.
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
// id Canvas
var canvasDom = document.getElementById("demoCanvas");
// Canvas Dom Context
var context = canvasDom.getContext("2d");
var image = new Image();//
image.src = "Images/a.png";//
image.onload = function() {//
for (var i = 0; i < 10; i++) {// 10
// ：（1） （2） x，（3） y
context.drawImage(image, 100 + i * 80, 100 + i * 80);
}
};
</script>
オンラインデモの表示 早くやってみない?
五、まとめ
Canvasはやっと基本的な使い方を紹介しました.もちろん、本文は他のサイトの例をたくさん参考にしました.著者も基本的なエッセンス部分を羅列した.全体的にCanvasは画像やテキスト、形状を描くのは難しくなく、APIコードの上手さは基本的に初級です.しかし、これによってもたらされる非常に多くの可能性は、Html 5を本当に比類のないほど強くした.
もちろん本稿では、Canvas 3 Dの描画に関する内容は触れておらず、Canvasのグラデーションの描画、シャドウの描画、画像の処理などについては、読者が必要とする場合は、関連資料を検索したり、Html 5の最新の標準文書を直接読んだりすることができます.
参照:http://javascript.ruanyifeng.com/htmlapi/canvas.html
本明細書の永続アドレス:http://blog.itjeek.com/blogs/Html5-5-canvas2.html