HTML 5 Canvasホワイトボード
6474 ワード
多くのホワイトボードの例を見て、保存に関する例はありませんが、私の考えは配列を使ってマウスの絵を描くときの軌跡座標を記録し、配列を操作し、具体的にどのように配列の中のデータをデータベースに保存するか、みんなが神通力しているか、私はあまり言いません.今唯一心配なのは、この配列がどれだけのデータを保存できるかということです.私がテストしたところでは、配列が2万個以内では影響がないということで、その後は言いにくいのですが・・・まず次のサンプルを見て、その後は改善しています.
転載先:https://www.cnblogs.com/x-man/archive/2012/01/06/2314922.html
DOCTYPE HTML>
<html>
<head>
<title>Titletitle>
<style type="text/css">
body{
position: absolute;
margin:0px;
left:0px;
top:0px;
}
style>
<script type="text/javascript">
var ctx;
var mycanvas;
var dtx;
var xy = new Array(); //
//var tts;
var x ; // X
var y ;// Y
window.οnlοad=function(){
dtx = document.getElementById("drawCanvas").getContext("2d");
mycanvas = document.getElementById("myCanvas");
ctx = mycanvas.getContext("2d");
ctx.lineWidth = 1; //
dtx.lineWidth = 1;
//ctx.lineCap = "round"; //
//tts = document.getElementById("tts"); //
mycanvas.onmousedown = startmove; // mycanvas
document.documentElement.onmouseup = stopmove; //
}
//
function drowPad(e)
{
ctx.save();
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(e.clientX-2,e.clientY-2); //cilentX ， mycanvas 2 ， 2
ctx.stroke();
x = e.clientX-2;
y = e.clientY-2;
ctx.restore();
xy.push([x,y]);//
//tts.innerHTML = x+","+y;
}
//
function startmove(e)
{
x = e.clientX-2; //
y = e.clientY-2;
xy.push([x,y]);//
mycanvas.onmousemove = drowPad;// mycanvas
}
//
function stopmove(e)
{
mycanvas.onmousemove = null; // mycanvas
xy.push([0.1,0]);// ， ，
}
//
function drowDTX()
{
dtx.clearRect(0,0,400,300); // mycanvas，
dtx.save();
for(var a = 0; a < xy.length; a++)
{
if(xy[a+1][0] == 0.1) //
{
a+=2;
continue;
}
if(xy[a][0] == 0.1) //
{
a++;
continue;
}
dtx.beginPath();
dtx.moveTo(xy[a][0],xy[a][1]);
dtx.lineTo(xy[a+1][0],xy[a+1][1]);
dtx.stroke();
}
dtx.restore();
//tts.innerHTML = xy.length;
}
script>
head>
<body onselectstart = "return false;">
<canvas style="border: 2px solid #000000" id="myCanvas" width="400" height="300"> canvas canvas>
<canvas style="border: 2px solid #000000" id="drawCanvas" width="400" height="300"> canvas canvas>
<p id="tts">p>
<input type="button" value=" " onclick="drowDTX()">
body>
html> 転載先:https://www.cnblogs.com/x-man/archive/2012/01/06/2314922.html