资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Canvas 涂鸦

Canvas 涂鸦

thekingisalwaysluc / 529人阅读

摘要：第二步，消除涂鸦锯齿的办法简单的绘制和图片保存完成了，但是在这种情况下，线条会有很明显的锯齿灵魂画手来了。在经过搜索查阅之后，发现有一个绘制办法可以降低锯齿的问题。橡皮擦的原理是，将橡皮绘制的路径覆盖到原来的画笔上。

第一步，我们先实现简单的绘制，并且在绘制之后将图片保存到本地 
</>复制代码 
  1.     var canvas = document.getElementById("canvas"),
  2.     ctx = canvas.getContext("2d"),
  3.     iptColor = document.getElementById("iptColor"),//画笔颜色
  4.     iptSize = document.getElementById("iptSize"),//画笔大小
  5.     btnClear = document.getElementById("btnClear"), //清除按钮
  6.     btnSave = document.getElementById("btnSave"),//保存按钮
  7.     canvasWidth = 800,
  8.     canvasHeight = 600;
  9.     canvas.setAttribute("width",canvasWidth);
  10.     canvas.setAttribute("height",canvasHeight);    
  11.     iptSize.oninput = function() {
  12.         document.querySelector(".txt-size").innerHTML = iptSize.value
  13.     }
  14.     canvas.addEventListener("mousedown",function(e){
  15.         var e = e || window.event;
  16.         ctx.lineWidth = iptSize.value; 
  17.         ctx.strokeStyle = iptColor.value;
  18.         ctx.lineCap = "round";
  19.         ctx.lineJoin = "round";
  20.         ctx.beginPath();
  21.         ctx.moveTo(e.clientX - canvas.offsetLeft,e.clientY - canvas.offsetTop); //线条起始位置
  22.         document.onmousemove = function(e) {
  23.             var e = e || window.event;        
  24.             ctx.lineTo(e.clientX - canvas.offsetLeft,e.clientY - canvas.offsetTop);
  25.             ctx.stroke();//绘制线条
  26.         };
  27.         canvas.onmouseup = function() {
  28.             document.onmousemove = null;
  29.             document.onmouseup = null;
  30.         };
  31.     })
  32.     //清除画布
  33.     btnClear.addEventListener("click",function(){
  34.         ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  35.     })
  36.     
  37.     //保存图片到本地
  38.     btnSave.addEventListener("click",function(){
  39.         var imgData = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  40.         var filename = "图片.png";
  41.         saveFile(imgData,filename)
  42.     })
  43.     
  44.     var saveFile = function(data, filename) {  
  45.         var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");  
  46.         save_link.href = data;  
  47.         save_link.download = filename;  
  48.         var event = document.createEvent("MouseEvents");  
  49.         event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  
  50.         save_link.dispatchEvent(event);  
  51.     };

这样看起来虽然说好像没问题，但是这一句有一些问题：

</>复制代码 
  1. e.clientX - canvas.offsetLeft,e.clientY - canvas.offsetTop

如果页面比较高，产生了滚动条，当滚动条向上滑的时候，绘图的位置就不准确了，示例如：https://codepen.io/jianxiujiu...。

所以此处应该使用：

</>复制代码 
  1. e.clientX - canvas.getBoundingClientRect().left,e.clientY - canvas.getBoundingClientRect().top

来替换。

第二步，消除涂鸦锯齿的办法

简单的绘制和图片保存完成了，但是在这种情况下，线条会有很明显的锯齿（灵魂画手来了）。

有一个简单粗暴的方法，将线条的边缘进行模糊：

</>复制代码 
  1. ctx.shadowBlur = 1;
  2. ctx.shadowColor = iptColor.value;

示例：https://codepen.io/jianxiujiu...
加上边缘模糊之后，线条明显柔和了许多，但是还是有一个问题，就是在画笔收笔的地方，线条会变小（灵魂画手又来了）。

在经过搜索查阅之后，发现有一个绘制办法可以降低锯齿的问题。
原理如图：

绘制一个圆点，在下一个圆点之间，绘制一个矩形进行填充。这样绘制出来的线条的衔接会是圆滑的。

</>复制代码 
  1.     var canvas = document.getElementById("canvas"),
  2.         ctx = canvas.getContext("2d"),
  3.         btnClear = document.getElementById("btnClear"),
  4.         btnSave = document.getElementById("btnSave"),
  5.         iptColor = document.getElementById("iptColor"),
  6.         iptSize = document.getElementById("iptSize"),
  7.         canvasWidth = 800,
  8.         canvasHeight = 600;
  9.     canvas.setAttribute("width",canvasWidth);
  10.     canvas.setAttribute("height",canvasHeight);    
  11.     
  12.     iptSize.oninput = function() {
  13.         document.querySelector(".txt-size").innerHTML = iptSize.value
  14.     }
  15.     canvas.addEventListener("mousedown",function(e){
  16.         var e = e || window.event;
  17.         var x1 = e.clientX - canvas.getBoundingClientRect().left,
  18.             y1 = e.clientY - canvas.getBoundingClientRect().top;
  19.         
  20.         lineSize = iptSize.value;
  21.         lineColor = iptColor.value;
  22.         ctx.beginPath();
  23.         ctx.fillStyle = lineColor;
  24.         ctx.lineCap = "round";
  25.         ctx.lineJoin = "round";
  26.         ctx.arc(x1, y1, lineSize, 0, 2 * Math.PI);
  27.         ctx.fill();
  28.         ctx.closePath();
  29.         
  30.         document.onmousemove = function(e) {
  31.             var e = e || window.event;    
  32.             var x2 = e.clientX - canvas.getBoundingClientRect().left,
  33.                 y2 = e.clientY - canvas.getBoundingClientRect().top;
  34.             var asin = lineSize * Math.sin(Math.atan((y2 - y1) / (x2 - x1)));
  35.             var acos = lineSize * Math.cos(Math.atan((y2 - y1) / (x2 - x1)));
  36.             //分别获取矩形的四个点的xy轴位置
  37.             var x3 = x1 + asin;
  38.             var y3 = y1 - acos;
  39.             var x4 = x1 - asin;
  40.             var y4 = y1 + acos;
  41.             var x5 = x2 + asin;
  42.             var y5 = y2 - acos;
  43.             var x6 = x2 - asin;
  44.             var y6 = y2 + acos;
  45.                                 
  46.             ctx.beginPath();
  47.             ctx.fillStyle = lineColor;
  48.             ctx.arc(x2, y2, lineSize, 0, 2 * Math.PI);
  49.             ctx.fill();
  50.             ctx.closePath();
  51.             ctx.beginPath();
  52.             ctx.fillStyle = lineColor;
  53.             ctx.moveTo(x3, y3);
  54.             ctx.lineTo(x5, y5);
  55.             ctx.lineTo(x6, y6);
  56.             ctx.lineTo(x4, y4);
  57.             ctx.fill();
  58.             ctx.closePath();
  59.             x1 = x2;
  60.             y1 = y2;
  61.         };
  62.         canvas.onmouseup = function() {
  63.             document.onmousemove = null;
  64.             document.onmouseup = null;
  65.         };
  66.     })
  67.     btnClear.addEventListener("click",function(){
  68.         ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  69.     })
  70.     btnSave.addEventListener("click",function(){
  71.         var imgData = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  72.         var filename = "图片.png";
  73.         saveFile(imgData,filename)
  74.         
  75.     })
  76.     
  77.     var saveFile = function(data, filename) {  
  78.         var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");  
  79.         save_link.href = data;  
  80.         save_link.download = filename;  
  81.         var event = document.createEvent("MouseEvents");  
  82.         event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  
  83.         save_link.dispatchEvent(event);  
  84.     };
  85.

DEMO：
https://codepen.io/jianxiujiu...

第三步，添加橡皮擦工具

用这个方法，我们还可以加上橡皮擦。
橡皮擦的原理是，将橡皮绘制的路径覆盖到原来的画笔上。
这里我们将用到canvas的一个属性globalCompositeOperation，详解参照：
http://www.w3school.com.cn/ta...

</>复制代码 
  1. var canvas = document.getElementById("canvas"),
  2.         ctx = canvas.getContext("2d"),
  3.         btnClear = document.getElementById("btnClear"),
  4.         btnSave = document.getElementById("btnSave"),
  5.         btnRestore = document.getElementById("btnRestore"),
  6.         iptColor = document.getElementById("iptColor"),
  7.         iptSize = document.getElementById("iptSize"),
  8.         eraser = document.getElementById("eraser")
  9.         pen = document.getElementById("pen"),
  10.         canvasWidth = 800,
  11.         canvasHeight = 600,
  12.         isClear = 0;
  13.     canvas.setAttribute("width",canvasWidth);
  14.     canvas.setAttribute("height",canvasHeight);    
  15.     
  16.     iptSize.oninput = function() {
  17.         document.querySelector(".txt-size").innerHTML = iptSize.value
  18.     }
  19.     eraser.addEventListener("click",function(){
  20.         isClear = 1;
  21.         this.classList.add("cho");
  22.         pen.classList.remove("cho")
  23.     })
  24.     pen.addEventListener("click",function(){ 
  25.         isClear = 0;
  26.         this.classList.add("cho");
  27.         eraser.classList.remove("cho")
  28.     })
  29.     canvas.addEventListener("mousedown",function(e){
  30.         var e = e || window.event;
  31.         var x1 = e.clientX - canvas.getBoundingClientRect().left,
  32.             y1 = e.clientY - canvas.getBoundingClientRect().top;
  33.             lineSize = iptSize.value;
  34.         if(isClear == 0){      
  35.             lineColor = iptColor.value;
  36.             ctx.beginPath();
  37.             ctx.fillStyle = lineColor;
  38.             ctx.arc(x1, y1, lineSize, 0, 2 * Math.PI);
  39.             ctx.fill();
  40.             ctx.closePath();
  41.             document.onmousemove = function(e) {
  42.                 draw();
  43.             };
  44.             btnClear.classList.remove("dis");
  45.             btnSave.classList.remove("dis");
  46.         }else{
  47.             ctx.strokeStyle = "rgba(250,250,250,0)";
  48.             document.onmousemove = function() {
  49.                 ctx.globalCompositeOperation = "destination-out";    
  50.                 draw();
  51.                 ctx.globalCompositeOperation = "source-over"
  52.             }
  53.         }
  54.         canvas.onmouseup = function() {
  55.             document.onmousemove = null;
  56.             document.onmouseup = null;
  57.         };
  58.         draw = function(e){
  59.             var e = e || window.event,
  60.                 x2 = e.clientX  - canvas.getBoundingClientRect().left,
  61.                 y2 = e.clientY  - canvas.getBoundingClientRect().top,
  62.                 asin = lineSize * Math.sin(Math.atan((y2 - y1) / (x2 - x1))),
  63.                 acos = lineSize * Math.cos(Math.atan((y2 - y1) / (x2 - x1))),
  64.                 x3 = x1 + asin,
  65.                 y3 = y1 - acos,
  66.                 x4 = x1 - asin,
  67.                 y4 = y1 + acos,
  68.                 x5 = x2 + asin,
  69.                 y5 = y2 - acos,
  70.                 x6 = x2 - asin,
  71.                 y6 = y2 + acos;                          
  72.             ctx.beginPath();
  73.             ctx.arc(x2, y2, lineSize, 0, 2 * Math.PI);
  74.             ctx.fill();
  75.             ctx.closePath();
  76.             ctx.beginPath();
  77.             ctx.fillStyle = lineColor;
  78.             ctx.moveTo(x3, y3);
  79.             ctx.lineTo(x5, y5);
  80.             ctx.lineTo(x6, y6);
  81.             ctx.lineTo(x4, y4);
  82.             ctx.fill();
  83.             ctx.closePath();
  84.             x1 = x2;
  85.             y1 = y2;
  86.         }
  87.     })
  88.     // 清除
  89.     btnClear.addEventListener("click",function(){
  90.         ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  91.         this.classList.add("dis");
  92.         btnSave.classList.add("dis");
  93.     })
  94.     //保存图片
  95.     btnSave.addEventListener("click",function(){
  96.         var imgData = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  97.         var filename = "图片.png";
  98.         saveFile(imgData,filename);
  99.         this.classList.add("dis");
  100.         
  101.     })
  102.     
  103.     var saveFile = function(data, filename) {  
  104.         var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");  
  105.         save_link.href = data;  
  106.         save_link.download = filename;  
  107.         var event = document.createEvent("MouseEvents");  
  108.         event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  
  109.         save_link.dispatchEvent(event);  
  110.     };

地址：https://codepen.io/jianxiujiu...

GPU云服务器 云服务器 涂鸦板 涂鸦 涂鸦私有云 简单涂鸦板

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89025.html

相关文章

  • vue组件：canvas实现图片涂鸦功能

    摘要：方案背景需求需要对图片进行标注，导出图片。对应方案用实现涂鸦圆形矩形的绘制，最终生成图片编码用于上传大量图片批量上传很耗时间，为了提高用户体验，改为只实现圆形矩形绘制，最终保存成坐标，下次显示时根据坐标再绘制。 方案背景 需求 需要对图片进行标注，导出图片。 需要标注N多图片最后同时保存。 需要根据多边形区域数据（区域、颜色、名称）标注。 对应方案 用canvas实现涂鸦、圆形、...

    roland_reed 评论0 收藏0

  • 利用vue制作在线涂鸦板

    摘要：撤销清空等操作撤销前进清空清空前后数据恢复到默认数据地址查看代码 效果展示 showImg(https://segmentfault.com/img/bVHJXf?w=1550&h=846); Canvas API简介 调用方法 getImageData() 返回ImageData对象，该对象为画布上指定的矩形复制像素数据 putImageData() 把图像数据（从指定的 Imag...

    nemo 评论0 收藏0

  • Android：涂鸦tuytaSDK实现逻辑

    摘要：开启扫描时需要设备处于配网状态一分类配网子设备可以通过使用手机蓝牙直接扫描获取设备到设备基础信息，再使用配网接口实现设备的本地配网。   (一)分类   (二)设备配置   (三)设备管理     设备管理，大体分为两类，mesh 和 其他     获取设备列表，给涂鸦sdk发送当前房间id...

    MorePainMoreGain 评论0 收藏0

发表评论

登陆后可评论

0条评论

thekingisalwaysluc

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<