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


Posted in Javascript onNovember 28, 2017

实例如下所示:

<!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实现(画笔大小 颜色 橡皮的实例)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 #Javascript
JavaScript中关于class的调用方法
Nov 28 #Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 #Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 #Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 #Javascript
Dropify.js图片宽高自适应的方法
Nov 27 #Javascript
jfinal与bootstrap的登出实战详解
Nov 27 #Javascript
You might like
PHP 中执行系统外部命令
2006/10/09 PHP
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
php变量作用域的深入解析
2013/06/03 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
发布你的Python模块详解
2016/09/15 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
长青弘远的面试题
2012/06/09 面试题
公司活动策划方案
2014/01/13 职场文书
个人思想政治总结
2015/03/05 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
检讨书怎么写?
2019/06/21 职场文书
Python实现生活常识解答机器人
2021/06/28 Python
Python 视频画质增强
2022/04/28 Python