当前位置：Gxlcms > JavaScript > javaScript canvas实现(画笔大小 颜色 橡皮的实例)

javaScript canvas实现(画笔大小 颜色 橡皮的实例)

时间：2021-07-01 10:21:17 帮助过：5人阅读

实例如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.  <meta charset="utf-8" />
  5.  <title></title>
  6.  </head>
  7.  <body>
  8.  <div>
  9.  <div>
  10.  
  11.  <!--<input type="button" id="open" value="open"></input>
  12.  <input type="button" id= "save" value = "save"></input> <input type="button" id= "color" value="color"></input> -->
  13.  <input type="button" value="size"></input>
  14.  <input type="text" id="size" onchange="sizeChange()"></input>
  15.  <input type="button" id="clear" value="clear"></input>
  16.  <input type="button" id="eraser" value="eraser" onclick="doEraser()"></input>
  17.  <select id = "shape" onchange="shapeChange()">
  18.   <option value = "99">shape</option>
  19.   <option value = "1">rectangle</option>
  20.   <option value = "0">circle</option>
  21.   <option value = "2">line</option>
  22.  </select>
  23.  
  24.  <input id="color" type="color"/>
  25.  </div>
  26.  <canvas id="myCanvas" style=" border:1px solid;" width="800" height="500"></canvas>
  27.  </div>
  28.  </body>
  29.  <script language="JavaScript">
  30.  var shap = 99; //0 is circle; 1 is rectangle
  31.  var orignalX, orignalY;//the coordinate of mouse down
  32.  var lastX, lastY;//the coordinate of last mouse position
  33.  var isMouseDown = false; // flag of mouse pressing down
  34.  var myCanvas = document.getElementById("myCanvas");
  35.  var context = myCanvas.getContext('2d');
  36.  var width = myCanvas.width, height = myCanvas.height;
  37.  var data;//storing last canvas' content
  38.  context.strokeStyle = "black";
  39.  context.strokeWidth=1;
  40.  context.lineWidth = 1;
  41.  
  42.  document.getElementById('color').onchange = function(){
  43.    context.strokeStyle = this.value
  44.  };
  45.  
  46.  function doEraser(){
  47.  context.strokeStyle = "white";
  48.  shap = 2;
  49.  }
  50.  function sizeChange(){
  51.  
  52.  context.lineWidth = parseInt(document.getElementById('size').value);
  53.  
  54.  }
  55.  
  56.  function shapeChange(){
  57.  context.strokeStyle = "black";
  58.   var myselect = document.getElementById("shape");
  59.  var index=myselect.selectedIndex ; 
  60.  var myvalue = myselect.options[index].value;
  61.  var mytext=myselect.options[index].text; 
  62.  shap = parseInt(myvalue);
  63.  
  64.   }
  65.  
  66.  function myCanvasMouseDown(event) {
  67.  //event.preventDefault();
  68.  
  69.  if(event.button == 0) {
  70.  orignalX = event.offsetX;
  71.  orignalY = event.offsetY;
  72.  context.moveTo(orignalX,orignalY); 
  73.  data = context.getImageData(0, 0, width, height);
  74.  isMouseDown = true;
  75.  
  76.  }
  77.  }
  78.  function myCanvasMouseMove(event) {
  79.  if (isMouseDown){
  80.  //event.preventDefault();
  81.  
  82.  switch(shap){
  83.   case 0:
  84.    context.clearRect(0,0,width,height);
  85.   context.putImageData(data,0,0);
  86.   lastX = event.offsetX;
  87.   lastY = event.offsetY;
  88.   context.beginPath();
  89.   context.arc(orignalX+(lastX-orignalX)/2,orignalY+(lastY-orignalY)/2,Math.abs(lastX-orignalX)/2,0,Math.PI * 2,true);
  90.   context.stroke();
  91.   context.closePath();
  92.   break;
  93.   case 1:
  94.   context.clearRect(0,0,width,height);
  95.   context.putImageData(data,0,0);
  96.   lastX = event.offsetX;
  97.   lastY = event.offsetY;
  98.   context.strokeRect(orignalX, orignalY, lastX-orignalX, lastY-orignalY);
  99.   break;
  100.   case 2:
  101.    lastX = event.offsetX;
  102.    lastY = event.offsetY;
  103.    context.lineTo(lastX, lastY); //根据鼠标路径绘画 
  104.    context.stroke(); //立即渲染 
  105.    break;
  106.   
  107.  }
  108.  }
  109.  }
  110.  function myCanvasMouseUp(event) {
  111.  if (isMouseDown){
  112.  //event.preventDefault();
  113.  
  114.  context.clearRect(0,0,width,height);
  115.  context.putImageData(data,0,0);
  116.  lastX = event.offsetX;
  117.  lastY = event.offsetY;
  118.  switch(shap){
  119.   case 0:
  120.   context.beginPath();
  121.   context.arc(orignalX+(lastX-orignalX)/2,orignalY+(lastY-orignalY)/2,Math.abs(lastX-orignalX)/2,0,Math.PI * 2,true);
  122.   context.stroke();
  123.   context.closePath();
  124.   break;
  125.   case 1:
  126.   context.beginPath();
  127.   context.strokeRect(orignalX, orignalY, lastX-orignalX, lastY-orignalY);
  128.   context.closePath();
  129.   break;
  130.   case 2:
  131.   
  132.   context.lineTo(lastX, lastY); //根据鼠标路径绘画 
  133.    context.stroke(); //立即渲染 
  134.   
  135.   break;
  136.  }
  137.  isMouseDown = false;
  138.  lastX = null;
  139.  lastY = null;
  140.  orignalX = null;
  141.  orignalY = null;
  142.  data = context.getImageData(0, 0, width, height);
  143.  context.beginPath();
  144.  context.clearRect(0,0,width,height);
  145.  context.putImageData(data,0,0);
  146.  context.closePath();
  147.  }
  148.  } 
  149.  myCanvas.addEventListener("mousedown", myCanvasMouseDown, false);
  150.  myCanvas.addEventListener("mousemove", myCanvasMouseMove, false);
  151.  myCanvas.addEventListener("mouseup", myCanvasMouseUp, false);
  152.  </script>
  153.  
  154. </html>

以上这篇javaScript canvas实现(画笔大小 颜色 橡皮的实例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！