首页 > 代码库 > WEB前端开发学习----10. canvas实现画板的两个方法

WEB前端开发学习----10. canvas实现画板的两个方法

2024-08-09 10:15:43   222人阅读

方法1：查看演示 点击鼠标作画

此方法就是鼠标移动的时候不停的画小圆点，然后用等粗的线将小圆点串起来（有点类似于珍珠项链）。因为是小圆点，所以效果要比方法2好，比较平滑。

 

方法2：查看演示 点击鼠标作画

这个方法很容易理解，就是不断的将鼠标所在的位置用线段连起来。缺点是不够平滑，尤其是粗线条的时候。

 

方法1：

[html] view plaincopy技术分享技术分享
 
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8"/>  
  5. </head>  
  6. <body style="margin:0">  
  7.     <canvas id="canvas">请更新浏览器版本</canvas>  
  8.   
  9.     <script>  
  10.         var canvas=document.getElementById("canvas");  
  11.         var cxt=canvas.getContext("2d");  
  12.         var radius=10;  
  13.         var falge=false;  
  14.         //画板大小为屏幕大小  
  15.         canvas.width=window.innerWidth;  
  16.         canvas.height=window.innerHeight;  
  17.         cxt.lineWidth=20;  
  18.         //添加监听对象  
  19.         canvas.addEventListener("mousedown", start);  
  20.         canvas.addEventListener("mouseup", stop);  
  21.         canvas.addEventListener("mousemove", putPoint);  
  22.   
  23.         function putPoint(e){  
  24.             if(falge){  
  25.                 cxt.lineTo(e.clientX, e.clientY);  
  26.                 cxt.stroke();  
  27.                 cxt.beginPath();  
  28.                 cxt.arc(e.clientX, e.clientY, radius, 0, 360, false);  
  29.                 cxt.fill();  
  30.                 cxt.beginPath();  
  31.                 cxt.moveTo(e.clientX, e.clientY);  
  32.   
  33.             }  
  34.         }  
  35.   
  36.         function start(e){  
  37.             falge=true;  
  38.             putPoint(e);  
  39.         }  
  40.         function stop(){  
  41.             falge=false;  
  42.             cxt.beginPath();  
  43.         }  
  44.   
  45.     </script>  
  46.   
  47. </body>  
  48. </html>  

 

 

 

方法2：

 

[html] view plaincopy技术分享技术分享
 
    1. <!doctype html>  
    2. <html>  
    3. <head>  
    4.     <meta charset="utf-8">  
    5. </head>  
    6. <body>  
    7.     <canvas width="900" height="500" id="canvas" style="border:1px solid black">请更新浏览器版本</canvas>  
    8.   
    9.     <script >  
    10.         var canvas=document.getElementById("canvas");  
    11.         var cxt=canvas.getContext("2d");  
    12.         var flag=false  
    13.         cxt.lineWidth=20;  
    14.         canvas.onmousedown=function(evt){  
    15.             //alert(evt.pageX);  
    16.             //alert(this.offsetLeft);  
    17.           
    18.                 var startX=evt.clientX-this.offsetLeft;  
    19.                 var startY=evt.clientY-this.offsetTop;  
    20.                 cxt.beginPath();  
    21.                 cxt.moveTo(startX, startY);  
    22.                 flag=true;  
    23.               
    24.         }  
    25.   
    26.         canvas.onmousemove=function(evt){  
    27.             if(flag){  
    28.                 var endX=evt.clientX-this.offsetLeft;  
    29.                 var endY=evt.clientY-this.offsetTop;  
    30.               
    31.                 cxt.lineTo(endX, endY);  
    32.                 cxt.stroke();  
    33.             }  
    34.         }  
    35.   
    36.         canvas.onmouseup=function(){  
    37.             flag=false;  
    38.         }  
    39.         canvas.onmouseout=function(){  
    40.             flag=false;  
    41.         }  
    42.   
    43.   
    44.     </script>  
    45. </body>  
    46. </html>  

WEB前端开发学习----10. canvas实现画板的两个方法


联系
我们