HTML 5 Canvas_html/css_WEB-ITnose

Canvas 要素は JavaScript を使用して Web ページ上に画像を描画しますが、描画機能はありません。

キャンバスは、ピクセルごとに制御できる長方形の領域です。

canvas には、パス、長方形、円、文字を描画したり、画像を追加したりするための複数の方法があります。

ここにいくつかの例があります:

1. キャンバスを塗りつぶします

< ;/canvas>

実行は次のとおりです:

2. 座標を取得します
<スクリプト タイプ ="text/javascript">
関数 cnvs_getCoowned(e){
x=e.clientX;
y=e.clientY;
document.getElementById("xycoowned").innerHTML="座標: (" + x + " ," + y + ")"; }
関数 cnvs_clearCoowned(){
document.getElementById("xycoowned").innerHTML="";}

" style="border:1px Solid #c3c3c3;">

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

実行は以下の通りです

2 次のように円を描きます:


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

実行は次のとおりです:

4グラデーションを描く



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

実行は次のとおりです:

5, 絵



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


実行は次のとおりです。