欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-04-09 20:55:29
实例如下所示：

实例如下所示：

<!doctype html>
<html>
 <head>
 <meta charset="utf-8" />
 <title></title>
 </head>
 <body>
 <div>
 <div>
 
 <!--<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"/>
 </div>
 <canvas id="mycanvas" style=" border:1px solid;" width="800" height="500"></canvas>
 </div>
 </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('2d');
 var width = mycanvas.width, height = mycanvas.height;
 var data;//storing last canvas' content
 context.strokestyle = "black";
 context.strokewidth=1;
 context.linewidth = 1;

 
 document.getelementbyid('color').onchange = function(){
   context.strokestyle = this.value
 };
 
 function doeraser(){
 context.strokestyle = "white";
 shap = 2;
 }
 function sizechange(){
 
 context.linewidth = parseint(document.getelementbyid('size').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>

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

上一篇： Golang 探索对Goroutine的控制方法(详解)

下一篇： 【转】权限管理学习 一、ASP.NET Forms身份认证

推荐阅读