html5-Canvas でさまざまなグラフィックを描画できる web_html5 チュートリアルのスキル

HTML5で最も重要なことは、Web上にさまざまなグラフィックスを描画できるCanvasの導入だと思います。これだけでも、Web プログラムとデスクトップ プログラムの間で少し曖昧になっているように感じます。 HTML5 以外の Web には、VML や SVG などの XML ベースの描画もあります。 Canvas はピクセルベースの描画です。 Canvas はお絵描きボードに相当する HTML ノードであり、描画を操作するには js を使用する必要があります。
以下:
お使いのブラウザは、 定義をまだサポートしていません。
キャンバス オブジェクトは var c=document.getElementById("myCanvas"); として取得できます。その js 属性メソッドは以下にリストされています:
1: レンダリング オブジェクト を描画します、c.getContext( " 2d")、2D 描画オブジェクトを取得するには、何度呼び出しても取得されるオブジェクトは同じオブジェクトになります。
2: 描画メソッド :
clecrRect(left,top,width,height) は指定された長方形領域をクリアし、
fillRect(left,top,width,height) は長方形を描画します。と fillStyle 塗りつぶし。
fillText(text,x,y) はテキストを描画します。
ストロークRect(left,top,width,height) は四角形を描画し、ストロークスタイルで境界線を描画します。
beginPath(): パスの描画を開始し、パスを初期状態にリセットします。
closePath(): パスの描画が終了し、開始点から閉曲線を追加します。 ;
moveTo(x, y): 図面の実際の座標を設定します。
lineTo(x, y); 現在の実際の位置から x, y まで直線を描きます。
fill()、ストローク()、クリップ(): 描画の最終的な塗りつぶしと境界線のアウトラインが完了したら、領域をクリップします。
arc(): 円弧、中心位置、開始ラジアン、終了ラジアンを描画して、円弧の位置とサイズを指定します。
rect(): 長方形のパス;
drawImage (Imag img): 描画します。画像;
quadraticCurveTo(): 二次スプライン パス、パラメーター 2 つの制御点;
bezierCurveTo(): ベジェ曲線、パラメーター 3 つの制御点;
createImageData、getImageData、putImageData: Canvas Medium ピクセルデータ。 ImageData は幅、高さ、データ データを記録します。データは
argb としての顔料の記録であるため、配列サイズの長さは width*height*4 で、順序は rgba です。 getImageData は長方形領域のピクセルを取得し、putImageData は長方形領域
のピクセルを設定します。
3: 座標変換 :
translate (x, y): 平行移動変換、原点が座標 (x, y) に移動
rotate (a): 回転変換、回転角度;
scale (x, y): スケーリング変換;
save()、restore(): 描画状態を保存および復元するためのスタックを提供し、save は現在の描画状態をスタックにプッシュします。復元はスタックをポップし、描画状態を復元します。
…など。
分かった、もう手遅れだ。私のテストコードを添付します:

コードをコピー

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

ブラウザはまだサポートしていません
var width,height,top,left; >top =left=5;
var y=10;
var maxwidth=c.width-5;
var maxheight=c.height-5;
var cxt=c.getContext("2d");
cxt.ストロークRect(0,0, c.幅、c.高さ);
var img=new Image();
var MyInterval=null; >function Refresh(){
cxt.clearRect(left,top,width,height);
if((left x)>(maxwidth-width)||left xx =- x;
}
if((上 y)>(最大高さ-高さ)||上 yy=-y;
左 = 左x;
top=top y;
cxt.drawImage(img,left,top,width,height);
cxt.font="20pt"; 、左、上 25);
}
関数 start(){
if(MyInterval==null){
MyInterval=setInterval("Refresh()",100);
}
関数 stop(){
if(MyInterval!=null){
clearInterval(MyInterval);
}
}
関数InRectangle (x,y,rectx,recty,rwidth,rheight){
return (x>=rectx&&x<=rectx rwidth)&&(y>=recty&&y<=recty rheight)
}
c.onmouseover = function(e){
if(InRectangle(e.clientX,e.clientY,left,top,width,height)){
stop();
}
c.onmouseout=function ( e){
start();
}
c.onmousemove=function(e){
if(InRectangle(e.clientX,e.clientY,left,top,width,height) ) {
if(MyInterval!=null){
stop();
}
}else{
}
}
}