Home > Article > Web Front-end > Examples of javaScript canvas implementing brush size, color, and eraser

Examples of javaScript canvas implementing brush size, color, and eraser

小云云Original: 2017-12-07 15:54:283514browse

Canvas, translated as "canvas" in Chinese, has a new 5ba626b379994d53f7acf72a64f9b697 element in HTML5, which can be combined with JavaScript to dynamically draw graphics in the canvas. In this article, we will share with you the javaScript canvas implementation (an example of brush size, color, and eraser). It has a good reference value and we hope it will be helpful to everyone.

The example is as follows:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title></title>
 </head>
 <body>
 <p>
 <p>
 
 <!--<input type="button" id="open" value="open"></input>
 <input type="button" id= "save" value = "save"></input> <input type="button" id= "color" value="color"></input> -->
 <input type="button" value="size"></input>
 <input type="text" id="size" onchange="sizeChange()"></input>
 <input type="button" id="clear" value="clear"></input>
 <input type="button" id="eraser" value="eraser" onclick="doEraser()"></input>
 <select id = "shape" onchange="shapeChange()">
  <option value = "99">shape</option>
  <option value = "1">rectangle</option>
  <option value = "0">circle</option>
  <option value = "2">line</option>
 </select>

 
 <input id="color" type="color"/>
 </p>
 <canvas id="myCanvas" style=" border:1px solid;" width="800" height="500"></canvas>
 </p>
 </body>
 <script language="JavaScript">
 var shap = 99; //0 is circle; 1 is rectangle
 var orignalX, orignalY;//the coordinate of mouse down
 var lastX, lastY;//the coordinate of last mouse position
 var isMouseDown = false; // flag of mouse pressing down
 var myCanvas = document.getElementById("myCanvas");
 var context = myCanvas.getContext(&#39;2d&#39;);
 var width = myCanvas.width, height = myCanvas.height;
 var data;//storing last canvas&#39; content
 context.strokeStyle = "black";
 context.strokeWidth=1;
 context.lineWidth = 1;

 
 document.getElementById(&#39;color&#39;).onchange = function(){
   context.strokeStyle = this.value
 };
 
 function doEraser(){
 context.strokeStyle = "white";
 shap = 2;
 }
 function sizeChange(){
 
 context.lineWidth = parseInt(document.getElementById(&#39;size&#39;).value);
 
 }
 
 function shapeChange(){
 context.strokeStyle = "black";
  var myselect = document.getElementById("shape");
 var index=myselect.selectedIndex ; 
 var myvalue = myselect.options[index].value;
 var mytext=myselect.options[index].text; 
 shap = parseInt(myvalue);
 
  }

 

 function myCanvasMouseDown(event) {
 //event.preventDefault();
 
 if(event.button == 0) {
 orignalX = event.offsetX;
 orignalY = event.offsetY;
 context.moveTo(orignalX,orignalY); 
 data = context.getImageData(0, 0, width, height);
 isMouseDown = true;
 
 }
 }

 function myCanvasMouseMove(event) {
 if (isMouseDown){
 //event.preventDefault();
 
 switch(shap){
  case 0:
   context.clearRect(0,0,width,height);
  context.putImageData(data,0,0);
  lastX = event.offsetX;
  lastY = event.offsetY;
  context.beginPath();
  context.arc(orignalX+(lastX-orignalX)/2,orignalY+(lastY-orignalY)/2,Math.abs(lastX-orignalX)/2,0,Math.PI * 2,true);
  context.stroke();
  context.closePath();
  break;
  case 1:
  context.clearRect(0,0,width,height);
  context.putImageData(data,0,0);
  lastX = event.offsetX;
  lastY = event.offsetY;
  context.strokeRect(orignalX, orignalY, lastX-orignalX, lastY-orignalY);
  break;
  case 2:
   lastX = event.offsetX;
   lastY = event.offsetY;
   context.lineTo(lastX, lastY); //根据鼠标路径绘画 
   context.stroke(); //立即渲染 
   break;
  
 }
 }
 }

 function myCanvasMouseUp(event) {
 if (isMouseDown){
 //event.preventDefault();
 
 context.clearRect(0,0,width,height);
 context.putImageData(data,0,0);
 lastX = event.offsetX;
 lastY = event.offsetY;
 switch(shap){
  case 0:
  context.beginPath();
  context.arc(orignalX+(lastX-orignalX)/2,orignalY+(lastY-orignalY)/2,Math.abs(lastX-orignalX)/2,0,Math.PI * 2,true);
  context.stroke();
  context.closePath();
  break;
  case 1:
  context.beginPath();
  context.strokeRect(orignalX, orignalY, lastX-orignalX, lastY-orignalY);
  context.closePath();
  break;
  case 2:
  
  context.lineTo(lastX, lastY); //根据鼠标路径绘画 
   context.stroke(); //立即渲染 
  
  break;
 }
 isMouseDown = false;
 lastX = null;
 lastY = null;
 orignalX = null;
 orignalY = null;
 data = context.getImageData(0, 0, width, height);
 context.beginPath();
 context.clearRect(0,0,width,height);
 context.putImageData(data,0,0);
 context.closePath();
 }
 } 
 myCanvas.addEventListener("mousedown", myCanvasMouseDown, false);
 myCanvas.addEventListener("mousemove", myCanvasMouseMove, false);
 myCanvas.addEventListener("mouseup", myCanvasMouseUp, false);
 </script>
 
</html>

Related recommendations ：

How Canvas handles images

Commonly used drawing techniques in Canvas in HTML5

js+HTML5 use Detailed explanation of canvas drawing method

The above is the detailed content of Examples of javaScript canvas implementing brush size, color, and eraser. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript generates simple arithmetic sequenceNext article：JavaScript generates simple arithmetic sequence

See more

Examples of javaScript canvas implementing brush size, color, and eraser

Related articles