[PGA] js-canvasプログラミング

・スマホ向けフリック入力タイピングはこちら
※アプリのインストールが必要です。
・PC向けタイピングはこちら
タブレット+BlueToothキーボードのプレイもこちらがオススメです!
Webアプリでプレイ
投稿者投稿者プログラミングアカデミーいいね0お気に入り登録
プレイ回数641難易度(4.4) 60秒 長文
プログラミングアカデミーjs-canvasに出てくるコード

関連タイピング

  • 競プロ向けc++

    競プロ向けc++

    競技プログラミングに特化したc++コードのタイピングです。

    プレイ回数2270
    英語長文300秒
  • スクラッチ

    スクラッチ

    プレイ回数740
    短文9打
  • コマンドタイピング

    コマンドタイピング

    コマンドラインやプログラミング言語のタイピング練習用

    プレイ回数1964
    英語長文90秒
  • java練習用

    java練習用

    プログラミング言語「java」の練習用です。

    プレイ回数4486
    英語長文243打
  • 基本情報技術者試験の用語集

    基本情報技術者試験の用語集

    基本情報技術者試験の用語集のタイピング

    プレイ回数1079
    60秒
  • pythonタイピング

    pythonタイピング

    python 基本

    プレイ回数267
    英字120打
  • TypeMaster94

    TypeMaster94

    全文字タイピング練習(108文字×100問,2分間ランダム)

    プレイ回数3684
    英語長文120秒
  • HTML&CSS

    HTML&CSS

    HTML&CSSを忘れないために

    プレイ回数2.6万
    英語長文759打

問題文

ふりがな非表示 ふりがな表示

(document.getelementbyid(”canvas”);)

canvas要素を手に入れる

(canvas.getcontext(”2d”);)

描画コンテキストを手に入れる

(context.fillrect(0, 0, 0, 0);)

四角形をぬりつぶす

(rgb(255, 255, 255))

RGBで白をあらわす文字列

(context.fillstyle = ”rgb(0, 0, 0)”;)

ぬりつぶしのスタイルを黒にする

(context.linewidth = 5;)

線はばを5にする

(context.strokestyle = ”rgb(0, 0, 0)”;)

線をえがくときのスタイルを黒にする

(context.strokerect(0, 0, 0, 0);)

四角形の線をえがく

(context.beginpath();)

新しいパス作成をはじめる

(context.closepath();)

パスを閉じる

(context.moveto(0, 0);)

パスをかかずにペン先を移動する

(context.lineto(0, 0);)

線のパスをえがく

(context.arc(160, 160, 80, 0, math.pi * 2);)

円形のパスをえがく

(context.filltext(”hi”, 0, 0);)

テキストをぬりつぶす

(context.drawimage(image, 0, 0);)

画像をえがく

(image.onload = function() {};)

画像の読みこみが終わったときに何かする

(const image = new image();)

新しい画像オブジェクトをつくる

(image.src = ”images/neko.png”;)

画像オブジェクトに画像ファイルの場所をセットする

(<script>)

スクリプトタグを開く

(</script>)

スクリプトタグを閉じる

プログラミングアカデミーのタイピング

オススメの新着タイピング

タイピング練習講座 ローマ字入力表 アプリケーションの使い方 よくある質問

人気ランキング

注目キーワード