HTMLのCanvasを使う

こんにちは、うさです。 今回はjQueryのプラグイン「jCanvas」を用いて スタンプ(画像)を押したり線を描いたりしました。 スタンプについて確認してみたいと思います。 コードは次の通りです!! ひとつひとつ何をやっているのか見ていきます!! まず、サーバ上のjQueryライブラリを読み込んで、 その後にjCanvasライブラリをHTMLファイルを同じとことから読み込みます。 次にHTMLを見てみます 「canvas」エレメントでキャンバスの範囲を決めて、 ラジオボタンでどのスタンプ(画像)を使うかを決めます。 チェックボックスでスタンプに影を付けるかどうかを選択できます。 続いて、jQueryを確認します。 まずは、ラジオボタンの選択によって画像が変わるように 『$(‘input:radio[name=”name属性”]’)』と記述をして 保存されているファイルから画像を「change()」で設定します。 次にクリックした位置に画像を描いていきます。 「click()」でクリックした時の処理を記述します。 「e.clientX」および「e.clientY」はWebブラウザの左上を基準としているので、 キャンバスの左上を基準にする処理を行います。 「drawImage()」でスタンプを描きます。 「source」でスタンプのパスを、「x,y」で座標を指定します。 また、チェックボックスによる影は 「shadowColor」と「shadowBlur」で色とぼかしの範囲を 「shadowX」および「shadowY」で影の位置を設定しています。 最後に「clearCanvas()」でキャンバス内を消しています。 ソースコードを見て何をやっているのかはわかるようになってきましたが、 自分で書くとなると難しいので、 どんどん練習していきます。 こちらがブラウザ上での表示で 左が影がないスタンプ、右が影を付けたスタンプです 名称未設定 このCanvasでこちらの参考書は一通り終わりました。 基本的な記述の仕方が載っており、解説も丁寧なのでとてもいい参考書だと思います。 何もわからないうちから勉強してもだいぶ力がつくと思います。 この次は「Android」を勉強していきます!!

Usami Go

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です