帰ってきたネコブログ

ふと、思いついて、何か作ってみようと思って。
そんで、Cancasにちょろっと描画しようと思ったら、あら大変。

なんか、線描いたら滲んでるように見えたんでんすよね。

    // id="mycanvas"である、canvas要素を確保
    var canvas = $( '#mycanvas' )[0];

    var ctx = canvas.getContext( '2d' );
    ctx.lineWidth = 1;

    // 白でクリア
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.fillRect( 0, 0, canvas.width, canvas.height );

    // 黒で水平ラインと、垂直ラインを引く
    ctx.strokeStyle = "rgb(0, 0, 0)";
    ctx.beginPath();
    ctx.moveTo( 20, 20 );
    ctx.lineTo( 320, 20 );
    ctx.moveTo( 20, 30 );
    ctx.lineTo( 20, 300 );
    ctx.stroke();

で、これをiOSシミュレータで見ると、ちょっと太く見えるわけですね。
あれ？って思って、ctx.lineWidth = 1;を追加しても改善されず。

で、このページを見つけて、調整してみました。

HTML5 Canvasのブラウザによって異なる微妙な振る舞いについてまとめてみた。
http://d.hatena.ne.jp/mindcat/20100815/1281877127

iOS上のSafariにおける注意点

• 水平ラインの始点は、y座標のみピクセルの中央にくるように0.5足す
• 垂直ラインの始点は、x座標のみピクセルの中央にくるように0.5足す
• strokeRectでは、左上の座標をピクセルの中央にする

なので、以下のように設定するといい感じになる。

    // 黒で水平ラインと、垂直ラインを引く
    ctx.strokeStyle = "rgb(0, 0, 0)";
    ctx.beginPath();
    ctx.moveTo( 20, 20.5 );
    ctx.lineTo( 320, 20.5 );
    ctx.moveTo( 20.5, 30 );
    ctx.lineTo( 20.5, 300 );
    ctx.stroke();

でも、まだまだ、やっぱ分からないことが多くて、
仕様書とか読めばいんですけどね、ほんとは。
さっきも、ラインの終点は描画されるのか、されないのか調べて、
ラインの終点ピクセルが描画されていないのを確認しました。
arc関数の中心もピクセルの中央のじゃなきゃいけないのかな？とか、
ひとつひとつ確認してみようと思います。

おしまい。

カテゴリー: iOS, コンピューター by ネコ on 2012年09月10日 | タグ: メモ