最近在研究下 html5 的 canvas 想写个小项目，练练手，结果写了一个画图板，功能点有 绘制、直线、圆、方形、涂鸦、线条粗细、颜色切换、撤销、回退、保存、下载、外部图片拖入等 ， 用的技术是包含 html5 中的本地存储、下载、canvas 等技术，上图。



演示地址： http://chengxinwei.github.io/html5/2013/06/20/HTML5_CANVAS_%E7%94%BB%E5%9B%BE%E6%9D%BF/

这个项目中用到了 canvas 的很多基础功能 。在这里解释一下核心代码的思路。

在这个项目中 我用到了 2 层 canvas ， 原因是当用户在画部分图形的时候希望看到绘画的过程，比如在画圆的时候，而canvas 目前支持的就是清空 和 绘制操作， 所以在这里我用了 bak 层做了一个 假象。用户一开始的所有绘制都是在 bak 层做的绘制 ， 之后当鼠标松开的时候 才会到 真正的 canvas 层保存。这个是核心思路。

接下来我们来看一下代码的构造。

1.首先第一部。是做对象初始化， 包括有 初始化canvas ， context ， height， width 这个很简单就不做多的解释了 代码如下。
Javascript代码
  1. //初始化
  2. varinitCanvas=function(){
  3. canvas=document.getElementById("canvas");
  4. canvas.width=canvasWidth;
  5. canvas.height=canvasHeight;
  6. context=canvas.getContext('2d');
  7. canvasTop=$(canvas).offset().top
  8. canvasLeft=$(canvas).offset().left;
  11. canvas_bak=document.getElementById("canvas_bak");
  12. canvas_bak.width=canvasWidth;
  13. canvas_bak.height=canvasHeight;
  14. context_bak=canvas_bak.getContext('2d');
  15. }


2. 第二部 就是绘制了 ， 思路是当鼠标点下得时候 确定一个初始点， 当鼠标移动的时候开始绘制。之前说过 鼠标移动只是在bak 层绘制 ， 当松开鼠标时把bak层的 添加到 canvas 层 。 那么这里就包含三个事件 。 点击，移动，松开 ， 对应了三个不同的方法 。代码如下：
Javascript代码
  2. //鼠标按下获取开始xy开始画图
  3. varmousedown=function(e){
  4. context.strokeStyle=color;
  5. context_bak.strokeStyle=color;
  6. context_bak.lineWidth=size;
  7. e=e||window.event;
  8. startX=e.clientX-canvasLeft;
  9. startY=e.clientY-canvasTop;
  10. context_bak.moveTo(startX,startY);
  11. canDraw=true;
  13. if(graphType=='pencil'){
  14. context_bak.beginPath();
  15. }elseif(graphType=='circle'){
  16. context.beginPath();
  17. context.moveTo(startX,startY);
  18. context.lineTo(startX+2,startY+2);
  19. context.stroke();
  21. }elseif(graphType=='rubber'){
  22. context.clearRect(startX-size*10,startY-size*10,size*20,size*20);
  23. }
  24. };
  26. //鼠标离开把蒙版canvas的图片生成到canvas中
  27. varmouseup=function(e){
  28. e=e||window.event;
  29. canDraw=false;
  30. varimage=newImage();
  31. if(graphType!='rubber'){
  33. image.src=canvas_bak.toDataURL();
  34. image.onload=function(){
  35. context.drawImage(image,0,0,image.width,image.height,0,0,canvasWidth,canvasHeight);
  36. clearContext();
  37. saveImageToAry();
  38. }
  39. varx=e.clientX-canvasLeft;
  40. vary=e.clientY-canvasTop;
  41. context.beginPath();
  42. context.moveTo(x,y);
  43. context.lineTo(x+2,y+2);
  44. context.stroke();
  45. }
  46. };
  48. //鼠标移动
  49. varmousemove=function(e){
  50. e=e||window.event;
  51. varx=e.clientX-canvasLeft;
  52. vary=e.clientY-canvasTop;
  53. //方块4条直线搞定
  54. if(graphType=='square'){
  55. if(canDraw){
  56. context_bak.beginPath();
  57. clearContext();
  58. context_bak.moveTo(startX,startY);
  59. context_bak.lineTo(x,startY);
  60. context_bak.lineTo(x,y);
  61. context_bak.lineTo(startX,y);
  62. context_bak.lineTo(startX,startY);
  63. context_bak.stroke();
  64. }
  65. //直线
  66. }elseif(graphType=='line'){
  67. if(canDraw){
  68. context_bak.beginPath();
  69. clearContext();
  70. context_bak.moveTo(startX,startY);
  71. context_bak.lineTo(x,y);
  72. context_bak.stroke();
  73. }
  74. //画笔
  75. }elseif(graphType=='pencil'){
  76. if(canDraw){
  77. context_bak.lineTo(e.clientX-canvasLeft,e.clientY-canvasTop);
  78. context_bak.stroke();
  79. }
  80. //圆未画得时候出现一个小圆
  81. }elseif(graphType=='circle'){
  82. clearContext();
  83. if(canDraw){
  84. context_bak.beginPath();
  85. varradii=Math.sqrt((startX-x)*(startX-x)+(startY-y)*(startY-y));
  86. context_bak.arc(startX,startY,radii,0,Math.PI*2,false);
  87. context_bak.stroke();
  88. }else{
  89. context_bak.beginPath();
  90. context_bak.arc(x,y,20,0,Math.PI*2,false);
  91. context_bak.stroke();
  92. }
  93. //涂鸦未画得时候出现一个小圆
  94. }elseif(graphType=='handwriting'){
  95. if(canDraw){
  96. context_bak.beginPath();
  97. context_bak.strokeStyle=color;
  98. context_bak.fillStyle=color;
  99. context_bak.arc(x,y,size*10,0,Math.PI*2,false);
  100. context_bak.fill();
  101. context_bak.stroke();
  102. context_bak.restore();
  103. }else{
  104. clearContext();
  105. context_bak.beginPath();
  106. context_bak.fillStyle=color;
  107. context_bak.arc(x,y,size*10,0,Math.PI*2,false);
  108. context_bak.fill();
  109. context_bak.stroke();
  110. }
  111. //橡皮擦不管有没有在画都出现小方块按下鼠标开始清空区域
  112. }elseif(graphType=='rubber'){
  113. context_bak.lineWidth=1;
  114. clearContext();
  115. context_bak.beginPath();
  116. context_bak.strokeStyle='#000000';
  117. context_bak.moveTo(x-size*10,y-size*10);
  118. context_bak.lineTo(x+size*10,y-size*10);
  119. context_bak.lineTo(x+size*10,y+size*10);
  120. context_bak.lineTo(x-size*10,y+size*10);
  121. context_bak.lineTo(x-size*10,y-size*10);
  122. context_bak.stroke();
  123. if(canDraw){
  124. context.clearRect(x-size*10,y-size*10,size*20,size*20);
  126. }
  127. }
  128. };


顺便提一下撤销和回退的做法。之前有提过在鼠标松开的时候，我们会把 bak 层的内容绘制到 canvas 层中， 那么在这个时候，同步的会把一份 图片信息 存到一个 数组中去，用于回滚 ， 当点击撤销的时候 只需要把上一个的 图片信息取出来，在绘制一遍canvas即可。撤销回退同理



4.接下来讲一下保存功能实现。保存图片使用得 是html5 的 storage 的功能实现的。storage 是浏览器开辟了一个5M 的控件提供方开发者使用 存放key value 的键值对， 有点类似于 cookie ，那么women保存的实现就很简单了，当点击保存按钮的时候 ， 获取图片的 dataUrl 保存与 storage 中即可，下次打开浏览器 获取再放入canvas中就可以了。代码如下：

Javascript代码
  1. //保存
  2. varsave=function(){
  3. for(vari=1;i<=8;i++){
  4. vardataUrl=getStorage(i);
  5. if(dataUrl==null||dataUrl==''){
  6. putStorage(i,canvas.toDataURL());
  7. $("#history_"+i).attr("src",canvas.toDataURL());
  9. initHistorty();
  10. return;
  11. }
  12. }
  13. }


5.最后说一下 下载，可能很多人因为这个头疼，因为没有后台的处理，怎么能做到下载图片呢。其实在html5中 对于 a 标签提供了一个新的属性 【download】 如：
Java代码
  1. <ahref="javascript:void(0);"id="history_download_1"download="picture.png">下载</a></td>
浏览器默认会把他当做一个下载链接去处理，下载的文件名就是 download 中的 picture.png 下载的内容对应的是src 中的值。所以我们只需要把 图片的dataUrl 动态赋值上去 即可。

今天就先讲到这里哈，有问题可以给我留言。


--------------//2013-06-258 ---------------

昨天新加了 拖拽图片的功能， 从文件夹中 拖到画图板里面可以直接覆盖。
代码页很简单 如下：
Javascript代码
  1. //处理文件拖入事件，防止浏览器默认事件带来的重定向
  2. functionhandleDragOver(evt){
  3. evt.stopPropagation();
  4. evt.preventDefault();
  5. }
  8. //判断是否图片
  9. functionisImage(type){
  10. switch(type){
  11. case'image/jpeg':
  12. case'image/png':
  13. case'image/gif':
  14. case'image/bmp':
  15. case'image/jpg':
  16. returntrue;
  17. default:
  18. returnfalse;
  19. }
  20. }
  23. //处理拖放文件列表
  24. functionhandleFileSelect(evt){
  25. evt.stopPropagation();
  26. evt.preventDefault();
  28. varfiles=evt.dataTransfer.files;
  30. for(vari=0,f;f=files[i];i++){
  31. vart=f.type?f.type:'n/a';
  32. reader=newFileReader();
  33. isImg=isImage(t);
  35. //处理得到的图片
  36. if(isImg){
  37. reader.onload=(function(theFile){
  38. returnfunction(e){
  39. varimage=newImage();
  40. image.src=e.target.result;
  41. image.onload=function(){
  42. context.drawImage(image,0,0,image.width,image.height,0,0,canvasWidth,canvasHeight);
  43. }
  45. };
  46. })(f)
  47. reader.readAsDataURL(f);
  48. }
  49. }
  50. }
  52. //初始化拖入效果
  53. varinitDrag=function(){
  54. vardragDiv=document.getElementById("canvas_bak");
  55. dragDiv.addEventListener('dragover',handleDragOver,false);
  56. dragDiv.addEventListener('drop',handleFileSelect,false);
  57. }

简单解释一下 ， 在html5支持的浏览器中， 有drop的回调函数 ， 在其中获得event之后 里面有一个对象 dataTransfer.files ， 获取的是 file 文件信息 ， 最后通过 FileReader.readAsDataURL 的函数读入，可以获取到 html5 支持的图片信息 ， 最后通过创建 image 对象，把图片绘制进去就可以了。

更多相关文章

  1. HTML5用户身份认证源代码：注册、登录、会话保持的解决方案
  2. Js 之将html转为图片html2canvas
  3. html页面中给img标签的src属性赋值为一张图片的存储路径，图片不显
  4. 将PHP代码添加到.html文件
  5. 如何让你的前端代码更像HTML5（用语义元素构造html5）
  6. HTML5批量拖拽图片到网页
  7. 如何在CSS中单独定位此HTML代码？
  8. QQ、MSN、淘包旺旺、Skype常设对话的html链接代码
  9. 10段实用的HTML5代码

随机推荐

  1. 聊聊 Python 的内置电池
  2. 一文读懂 Serverless，将配置化思想复用到
  3. 当 Python 中混进一只薛定谔的猫……
  4. 为什么 Python 3 把 print 改为函数？
  5. 如何用python制作动态二维码，来哄女朋友开
  6. MySQL 8 OCP(1Z0-908)认证考试题库原题（第
  7. 肝了一个月的编程导航诞生！轻松发现优质编
  8. mysql 常用命令
  9. 前端框架LayUI介绍及用法
  10. 编程语言之问：何时该借用，何时该创造？