コメント：HTML5では、最も重要なことはキャンバスを導入して、Webでさまざまなグラフィックを描画できるようにすることだと思います。Canvasはピクセルベースの図面です。キャンバスはアートボードに相当するHTMLノードです。JSで描画する必要があります
HTML5では、最も重要なことは、Webでさまざまなグラフィックを描くことができるように、キャンバスを導入することだと思います。これは、この点で少しぼやけているという感覚を人々に与えます。 HTML5 Webには、VMLやSVGなどのXMLベースの図面もあります。キャンバスはピクセルベースの図面です。 Canvasはアートボードに相当するHTMLノードであり、JSに描画する必要があります。次のように：
<canvas id = mycanvas width = 600 height = 300>ブラウザは定義をサポートしていません</canvas>。
var c = document.getElementbyId（mycanvas）としてキャンバスオブジェクトを取得できます。そのJS属性メソッドは、次のようにリストする必要があります。
1：レンダリングされたオブジェクト、c.getContext（2d）を描画し、2D描画オブジェクトを取得します。オブジェクトを何回呼び出しても、オブジェクトは同じオブジェクトになります。
2：描画方法：
clecrrect（左、上、幅、高さ）は、定義された長方形の領域をクリアします。
fillrect（左、上、幅、高さ）は、長方形を描き、fillstyleで満たします。
filltext（text、x、y）はテキストを描画します。
ストラーク（左、上、幅、高さ）は長方形を描き、境界をストロークスタイルで描きます。
beginpath（）：パスの描画をオンにし、初期状態へのパスをリセットします。
closepath（）：パスパスエンドを描画すると、閉じた間隔が描画され、開始位置から現在の座標に閉じた曲線が追加されます。
Moveto（x、y）：図面の実際の座標を設定します。
Lineto（x、y）;現在の位置からx、yに直線を描画します。
fill（）、stroke（）、clip（）：描画が完成した最後の塗りつけと境界のアウトライン、クリップ領域。
arc（）：アーク、中心位置、ラジアンの開始、および終了ラジアンを描画して、アークの位置とサイズを指定します。
rect（）：長方形経路;
DrawImage（Image IMG）：写真を描く。
QuadraticCurveto（）：二次スプラインパス、パラメーター2つの制御点。
Beziercurveto（）：ベジエ曲線、パラメーターの3つの制御点。
createimagedata、getimagedata、putimagedata：キャンバスのピクセルデータです。 Imagedataは、記録的な幅、高さ、およびデータデータであり、データは私たちの顔料の記録です
Argb、したがって、配列のサイズの長さは幅*高*4であり、順序はそれぞれRGBAです。 getimagedataは長方形の領域のピクセルを取得することであり、Putimagedataは長方形の領域ピクセルを設定することです。
… 等々！
3：座標変換：
翻訳（x、y）：翻訳、原点は座標（x、y）に移動します。
回転（a）：回転変換、程度の回転角;
スケール（x、y）：スケーリング変換;
save（）、restore（）：提供し、スタックを提供し、描画状態を保存して復元し、現在の描画状態をスタックに押し込み、スタックを復元し、描画状態を復元します。
… 等々！
わかりました、手遅れです。私のテストコードを添付しました：
<html>
<head>
</head>
<body>
<canvas>ブラウザはそれをサポートしていません</canvas>
<script type = "text/javascript">
var幅、高さ、上、左;
width = height = 100;
top = left = 5;
var x = 10;
var y = 10;
var c = document.getElementById（ "mycanvas"）;
var maxwidth = c.width-5;
var maxheight = c.height-5;
var cxt = c.getContext（ "2d"）;
cxt.strokestyle = "＃00f";
cxt.Strokerect（0,0、C.Width、C.Height）;
var img = new Image（）;
img.src = "1.gif";
var myinterval = null;
始める（）;
function refresh（）{
cxt.ClearRect（左、上、幅、高さ）;
if（（左+x）>（maxwidth-width）|| left+x <0）{
x = -x;
}
if（（top+y）>（maxheight-height）|| top+y <0）{
y = -y;
}
左=左+x;
top = top+y;
cxt.drawimage（IMG、左、上、幅、高さ）;
cxt.font = "20pt songyi";
cxt.filltext（ "Breaking Wolf"、左、トップ+25）;
}
function start（）{
if（myinterval == null）{
myinterval = setInterval（ "refress（）"、100）;
}
}
関数stop（）{
if（myinterval！= null）{
ClearInterval（myinterval）;
myinterval = null;
}
}
関数inRectangle（x、y、rectx、recty、rwidth、raight）{
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））{
停止（）;
}
c.onmouseout = function（e）{
始める（）;
}
c.onmousemove = function（e）{
if（inRectangle（e.clientx、e.clienty、left、top、width、height））{
if（myinterval！= null）{
停止（）;
}
}それ以外{
始める（）;
}
}
}
</script>
</body>
</html>