WEB前端開發學習----10. canvas實現畫板的兩個方法

時間  2019-11-09
標籤 web 前端 開發 學習 canvas 實現 畫板 兩個 方法 欄目 HTML 简体版
原文   原文鏈接

方法1：查看演示 點擊鼠標做畫html

此方法就是鼠標移動的時候不停的畫小圓點，而後用等粗的線將小圓點串起來（有點相似於珍珠項鍊）。由於是小圓點，因此效果要比方法2好，比較平滑。canvas

 

方法2：查看演示 點擊鼠標做畫瀏覽器

這個方法很容易理解，就是不斷的將鼠標所在的位置用線段連起來。缺點是不夠平滑，尤爲是粗線條的時候。this

 

方法1：spa

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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：.net

 

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
    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>  
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程