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 相关文章推荐
jquery 年会抽奖程序
Dec 22 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
php 生成饼图 三维饼图
2009/09/28 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
php时间函数用法分析
2016/05/28 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
详解Vue方法与事件
2017/03/09 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
Python常见数字运算操作实例小结
2019/03/22 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
python之array赋值技巧分享
2019/11/28 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
Django自带的用户验证系统实现
2020/12/18 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
教师开学感言
2014/02/14 职场文书
活动总结怎么写
2014/04/28 职场文书
个人维稳承诺书
2015/05/04 职场文书
高中数学教学反思范文
2016/02/18 职场文书
python 管理系统实现mysql交互的示例代码
2021/12/06 Python