1

htmlcanvas要素を使用して、データをグラフとして描画しています。

1 ページに 4 つのキャンバスがあり、それぞれにチャートがあります。

ユーザーがチャートをクリックすると、チャートを拡大したい。

小さいグラフの場合、私のコードは次のとおりです。 <canvas width='350' height='200' ></canvas>

より大きなグラフの場合、次の属性を使用して同じグラフを再構築します。 <canvas width='700' height='350' ></canvas>

私が試してみました：

  1. onclick - 高さと幅の属性に新しい値を使用してチャート全体を再描画します。

  2. onclick - css スタイルの高さと幅の新しい値でチャート全体を再描画します。

  3. onclick - 属性と CSS スタイルの両方で新しい値を使用してチャート全体を再描画します。

グラフが空白になったり、キャンバスが大きくなったりするなど、非常に予期しない結果が得られますが、比率がかなりずれています。

4

2 に答える 2

4

開始キャンバスの寸法を保存します。

var canvasWidth=canvas.width;
var canvasHeight=canvas.height;

拡大するには:

canvas.width=canvasWidth*1.5;
canvas.height=canvasHeight*1.5;
context.scale(1.5,1.5);
// And now redraw your chart normally
// It will be 50% larger

開始寸法に戻すには:

canvas.width=canvasWidth;
canvas.height=canvasHeight;
context.scale(1,1);
// And now redraw your chart normally
// It will be back to the starting dimensions

次に、キャンバスをクリックすると、大きいサイズと最初のサイズの間で寸法が切り替わります。

于 2013-09-30T19:15:52.913 に答える
0

これは、あなたの望むことですか？ここでjsfiddleチェックを作成しましたhttp://jsfiddle.net/NDgMC/:checked 、 cssとチェックボックスで疑似要素を 使用しました

HTML コード:

<input type="checkbox" class="toggle" name="ao-toggle" />
<canvas id="myCanvas"></canvas>

CSS コード:

input.toggle{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0;
    padding: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    z-index: 100;
    border: none;
    cursor: pointer;
}

input.toggle:checked + #myCanvas{
    border:1px solid #000000;
    background-color:#000;
    width:400px;
    height:200px;
    -webkit-transition:0.5s;
    transition:0.5s;
}

#myCanvas{
    border:1px solid #000000;
    background-color:#ccc;
    width:200px;
    height:100px;
    -webkit-transition:0.5s;
    transition:0.5s;
}
于 2013-09-30T17:56:23.460 に答える