質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • Android

    6527questions

    Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

  • HTML5

    4021questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • canvas

    259questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Android 4.2 で Canvas にパスが重複して描画される

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 102

タッチイベントを使って Canvas 要素にお絵描きをしようとしているのですが、 Android 4.2 で context.beginPath() すると、まず前回のパスが描画され、その続きとしてパスが描画されてしまいます。

touchstart (evn) {
    var pnt = point(evn);
    context.beginPath();
    context.moveTo(pnt.x, pnt.y);
    drawing = true;
}
touchmove (evn) {
    if (!drawing) return;
    evn.preventDefault();
    var pnt = point(evn);
    context.lineTo(pnt.x, pnt.y);
    context.stroke();
}
touchend (evn) {
    if (!drawing) return;
    var pnt = point(evn);
    context.lineTo(pnt.x, pnt.y);
    context.stroke();
    drawing = false;
}
clear () {
    context.clearRect(0, 0, canvas.width(), canvas.height());
}

`

特に、一度パスを描画してから上記 clear() で消去した後、 touchstart が発火すると、消去する前のパスが表示され、その続きでパスが描画されます。

Android 4.4 や iOS では同様の現象が起きないので、少なくとも Android 4.2 に起因する問題かと思っているのですが、対処方法はありますでしょうか。

どうぞよろしくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    fabric.jsでのピンチイベント

    fabric.jsにて、スマートフォン表示の際に画像の拡大をピンチイベントで行うにはどうすればいいでしょうか?

  • 解決済

    Canvasについて

    前提・実現したいこと jsファイルとhtmlファイルでcanvasを用いて、図形を描いています。 <p> <button id="1" va

  • 解決済

    SVGで装飾付きのアナログ時計を作りたい(Snap.svg)

    お世話になります。  概要 ただいまSVGで「秒針が進む度に、一番外側の枠が1目盛りづつ増えるアナログ時計」を作ろうとしています。 使用しているのはSnap.svgで

  • 受付中

    javascriptで正三角形を描きたい

    javascriptのcanvasで、頂点座標と辺の長さのパラメータを入力して正三角形を描きたいのですが、うまく作動しません。まだ始めたばかりでどこが違うのかわからないです。

  • 解決済

    jsで再帰処理で等差数列の取得がしたい

    前提・実現したいこと jsで再帰処理で等差数列の取得がしたい 発生している問題・エラーメッセージ jsで再帰処理の練習をしようと思い、とりあえず等差数列を配列で取得できる

  • 解決済

    JavaScript canvasにimageファイルが表示されません。

    JavaScriptで以下のソースを書きましたが、 drawImage()でイメージファイルが表示できません。 ブラウザはGoogle Chromeです。 どなたか、理由がわかるか

  • 解決済

    スマホのタッチイベントで2つ処理が実行されてしまう

    現在HTML,Javascript(jQuery)を使ってスマホ用Webページを作っています。 そこでおかしな現象が起こってしまい対処したいのですが、そのように対処するのがいいか検

  • 解決済

    画像の指定箇所に四角を表示する方法

     前提・実現したいこと javascriptを用いて画像の中の指定した場所に四角枠を記入したいと考えてます。 大量の画像をこのように表示したいので、 保存メモリの関係上、元画像に枠

同じタグがついた質問を見る

  • Android

    6527questions

    Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

  • HTML5

    4021questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • canvas

    259questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。