HTML5 Canvas白板

看了很多的白板例子，都没有与保存相关的例子，而我的思路是使用数组来记录鼠标绘画时的轨迹坐标，在对数组进行操作，具体怎么把数组中的数据保存到数据库大家各显神通，我就不多说了。现在唯一担心的是这个数组能保存多少数据呢？据我测试当数组在2万个值内还是没什么影响的，之后就不好说···· ·· 先看下面小样，之后在改进吧。

<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<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像素，所以要减去2ctx.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

HTML5 Canvas白板相关推荐

html5 在线白板,Html5 canvas画图白板踩坑
最近接手了一个小型的H5,最主要的功能大概就是拍照上传和canvas画板了. 主要是记录一下自己菜到像傻子一样的技术. 1.canvas画板隔空打牛!画布越往上部分错位距离越小,越往下距离越大. 2. ...
使用 HTML5 canvas 绘制精美的图形
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C "工作草案" - 意味着它仍然处于开发阶段 - 它包含丰富的元素和属性,它 ...
html5 canvas实际应用,Html5 Canvas入门及经典应用
Html5 Canvas入门及经典应用时间:2019-02-15 来源:华清远见 canvas想必对于前端的工程师都不陌生了,它是 HTML5 新增的「画布」元素,是HTML5 的一大亮点, ...
html li 右跟下有倒影,HTML5 canvas实现的下雨夜湖面星空倒影动画特效
HTML5 CANVAS 下雨夜的湖面星空倒影 * { margin: 0; padding: 0; border: 0; background: #000 } canvas { position: ...
html5 canvas雨点打到窗玻璃动画
html5 canvas雨点打到窗玻璃动画 HTML5下雨效果效果预览:http://hovertree.com/texiao/html5/4.htm 以下是代码: 1 <!doctype h ...
HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅 ...
Html5 Canvas 扫雷 (IE9测试通过)
扫雷是一个非常经典的游戏,记得在第一次接触的windows 3.22 上就有扫雷了,到现在的Win7,依然保留着这个经典的游戏,结合Html5 Canvas,模仿Win7的UI,将老板扫雷进行了升级. ...
HTML5 Canvas 基础API和实例
开发HTML代码是一件简单的事情,一个文字编辑器,然后一个支持HTML5的浏览器即可(本人的浏览器是Firefox8.0.1).了解HTML的朋友应该知道,HTML5中最让人兴奋的API是canvas ...
html5 canvas 加载图片
html5 canvas 加载图片视频 https://www.bilibili.com/video/BV19E411G7Vj?p=30 https://www.bilibili.com/video ...

HTML5 Canvas白板

HTML5 Canvas白板相关推荐

最新文章

热门文章