share facebook facebook twitter menu hatena pocket slack

HTML5でCanvas描画

小森隆太

WRITTEN BY 小森隆太

こんにちわ。
職人見習いの小森です。

今回は、HTML5のCanvasにおける描画についてです。

○index.html


  Canvas対応ブラウザで表示してください


未対応のブラウザであればメッセージだけが表示されます。

○canvas.js

window.addEventListener("load",function(){
    if(!window.HTMLCanvasElement ){
      return;
    }
    var cv = document.getElementById("c1");
    var context = cv.getContext("2d");

    if(!context){
       return;
    }

    context.fillStyle="white";
    context.fillRect(0,0,c1.width,c1.height);
    context.strokeStyle = "rgba(255,0,0,0.5)";
    context.lineWidth = 10;
    context.strokeRect(10,250,200,10);

    context.beginPath();
    context.strokeStyle="blue";
    context.arc(90,100,50,0,Math.PI,true);
    context.stroke();
},true);

描画先のCanvasを取得し、描画先Canvasから描画機能オブジェクトを取得し
そこに座標、色、サイズなどを指定するという流れです。

※この記事は、なかの人(spitz8008)が書いています。

小森隆太

小森隆太

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。