>> HTML5

Canvas APIについて

ImageData

Canvasをピクセル単位で処理するための配列のようなデータです。横幅 x 高さ x 4(Red,Green,Blue,Alpha)の大きさになります。

20x20なら1600

特定のpixelにアクセスする場合は、(ywidth+x)4の位置

一度取り出したら、putするまで反応されない。

取得する

context2dからgetImageData(x,y,width,height)

新規に作成する

context2dからcreateImageData(width,height)

現在のキャンバスに設定する

context2dからputImageData(width,height)

Tips

スクロールを停止

大きい画像のレタッチをやりたい場合、スクロールが邪魔な場合がある。 ontouchstartで、preventdefault呼ぶといい。

その場合残りは、ontouchmove,ontouchendで処理することになる。

スクロールを停止が効かない

canvasのイベントのontouchstartで重い処理をしないこと仮に、スクロール防止の為に、preventdefault呼び出しても、なぜか効かなくなる。

画像描画時の回転と移動

回転は画像の中央で
回転した後に戻る
拡大に合わせて描画位置の調整
スクロールするなら、回転を戻す必要がある

例(java-GWT)

public static void drawCenter(Canvas canvas,ImageElement image,int offsetX,int offsetY,double scaleX,double scaleY,double angle,double alpha){
    canvas.getContext2d().save();
    double rx=(canvas.getCoordinateSpaceWidth())/2;
    double ry=(canvas.getCoordinateSpaceHeight())/2;

    canvas.getContext2d().translate(rx,ry);//rotate center
    double rotate=(Math.PI / 180)*angle;
    canvas.getContext2d().rotate(rotate);
    canvas.getContext2d().translate(-rx,-ry);//and back

    canvas.getContext2d().scale(scaleX,scaleY);

    double px=(canvas.getCoordinateSpaceWidth()/scaleX-image.getWidth())/2;
    double py=(canvas.getCoordinateSpaceHeight()/scaleY-image.getHeight())/2;

    //LogUtils.log("w="+canvas.getCoordinateSpaceWidth()+",scaled="+(element.getWidth()*scale));

    //LogUtils.log("scale:"+scale+",x="+px+",y="+py);

    int ox=(int) (offsetX/scaleX);
    int oy=(int) (offsetY/scaleY);
    //canvas.getContext2d().rotate(-rotate);

    double x=ox;
    double y=oy;

    //offset is effect on angle,but scroll no need do it
    double nx = px+x * Math.cos(-rotate) - y * Math.sin(-rotate);
    double ny = py+x * Math.sin(-rotate) + y * Math.cos(-rotate);

    canvas.getContext2d().translate(nx,ny);    
    canvas.getContext2d().setGlobalAlpha(alpha);
    canvas.getContext2d().drawImage(image, 0,0);
    canvas.getContext2d().restore();
}

綺麗に縮小

基本的に、Canvasでリサイズすると、速度優先のため、ギザギザが目立ちます。これを改善するには、別途自分で変換する必要があります。

Stackoverflowに素晴らしいサンプルコードがありました。

この方法を使うと、Picasaと同等の品質でリサイズできました。

単純なズーム

画像とか描く場合、通常、width,heigtなどを、画像と同じにしていますがこれを、単純に２倍・４倍とすると、大きく表示できます。

そして、この時に、発生するマウスイベントの座標を、そのズームで割ると、普通に動きます。

ただし、若干精度は悪いですが

関連サイト