独学HTML5 第4章（キャンバスの詳細説明）_html/css_WEB-ITnose-htmlチュートリアル-php.cn

独学HTML5 第4章（キャンバスの詳細説明）_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:56:40

オリジナル

1105 人が閲覧しました

canvas は HTML5 の本質のようです。よく学ばなければなりません。美しいものは基本から始めなければなりません。。。。

まずキャンバスと呼ばれるものについて見てみましょう

キャンバスとは何ですか?

HTML5 の Canvas 要素は、JavaScript を使用して Web ページ上に画像を描画します。

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

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

キャンバスを作成する

HTML5 ページにキャンバス要素を追加します。

要素の ID、幅、高さを指定します:

<canvas id="myCanvas" width="200" height="100"></canvas><strong>矩形的绘制</strong>

ログイン後にコピー

Canvas 要素自体には描画機能がありません。すべての描画作業は JavaScript 内で行う必要があります:

<script type="text/javascript">var c=document.getElementById("myCanvas");    //使用 id 来寻找 canvas 元素：var cxt=c.getContext("2d");      //创建 context 对象：getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法cxt.fillStyle="#FF0000";     //代码绘制一个红色的矩形：    cxt.fillRect(0,0,150,75);</script>

ログイン後にコピー

1. fillRect()

2. bloodRect()

Line

開始位置と終了位置を指定して線を描画します:

<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();</script>

ログイン後にコピー

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>1. lineWidth

ログイン後にコピー

Circle

rree

グラデーション

<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();</script>

ログイン後にコピー

rree

画像

rree