ここから本文です

html5のcanvasの質問です。 以下の記述を行い、ローカル完結の教材を作ろうとして...

ann********さん

2017/6/419:54:11

html5のcanvasの質問です。
以下の記述を行い、ローカル完結の教材を作ろうとしていますが、タッチパネルに対応させたいところでハマりました。

単純にtouchtstartやmove、endを加えればよいかと思いましたが駄目でした。もしかすると、canvasと、同ページ内で要素を動かそうとしているjsが干渉しあってるのかもしれませんが、素人でわかりません。

どなたかタッチパネル対応の記述を教えていただけないでしょうか。文字数の関係で動かしたい要素とボタンは一つだけ記述します。

’------------以下記述
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>画像にお絵かき</title>

<link rel="stylesheet" href="css/bootflat.site.min.css">
<link rel="stylesheet" href="css/css.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="css/styles.css" rel="stylesheet">
<link href="css/mobile.css" rel="stylesheet" media="screen and (max-width:640px)">

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/move.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.touch-punch.js"></script>


</head>
<body style="background-color: #f1f2f6;">

<div class="container">

<canvas id="canvas1" width="1280" height="490"></canvas>
<br>
<button id="bt01" class="btn btn-primary"></button>


<div>
<table><tr>
<button id="bt_eraser" class="btn" style="background-color:#AAB2BD; width:250px;"><i class="fa fa-eraser"></i>けしゴム(下の絵も消えます)</button>
<button id="bt_reload" class="btn" style="background-color:#AAB2BD; width:120px;"><i class="fa fa-refresh"></i>はじめから</button>
<br>
<button id="bt11" class="btn btn" style="background-color:#EC87C0; width:160px;">画像として一時保存</button>

<p id="move1"><img src="img/1.JPG" width="150" height="100"></p>


</div>
<br>
<img src="" id="img_png" width="320" height="180">

<script type="text/javascript">

$(function() {

var rect = $('#canvas1').offset(); //canvasの左上座標を取得

var canvas = document.getElementById("canvas1");
var ctx1 = canvas1.getContext("2d");

var onoff = false; // 描画が可能かどうかのフラグ

var oldx = rect.left;
var oldy = rect.top;


canvas1.addEventListener("mousemove" , paint , true); //mousemoveでpaintを実行

canvas1.addEventListener("mousedown" , function(e){ //mousedown
onoff = true;
oldx = e.pageX - rect.left; //マウスダウンした座標
oldy = e.pageY - rect.top;
console.log(oldx , oldy);

} , false);

canvas1.addEventListener("mouseup" , function(e){ //mouseup
onoff = false;
} , false);




ctx1.fillStyle = "#eee";
ctx1.fillRect(0,0,1280,490);

var linecolor = "#000"; //色の初期設定
var linw = 4; //線幅の初期設定

function paint(e){

if ( onoff == true ){
var newx = e.pageX - rect.left; //マウスの新しい座標
var newy = e.pageY - rect.top;

ctx1.beginPath();
ctx1.moveTo(oldx,oldy);
ctx1.lineTo(newx,newy);
ctx1.strokeStyle = linecolor;
ctx1.lineWidth = linw;
ctx1.lineCap = "round";
ctx1.stroke();

oldx = newx; //今の新しい座標を次の描画の始点に
oldy = newy;

};

};

var bt01 = document.getElementById("bt01");
bt01.addEventListener('click' , function(){
linecolor = "#3bafda";
} , false );




});
</script>


</body>
</html>

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

閲覧数:
56
回答数:
1
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

江口洋介さん

2017/6/420:16:59

よくわからんけどe.preventDefault()

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる