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 相关文章推荐
验证码按回车不变解决方法
Mar 29 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
Angular 应用技巧总结
Sep 14 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
微信小程序下拉菜单效果的实例代码
May 14 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中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
图解js图片轮播效果
2015/12/20 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
JavaScript File分段上传
2016/03/10 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
python中set()函数简介及实例解析
2018/01/09 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
python定时关机小脚本
2018/06/20 Python
详解python pandas 分组统计的方法
2019/07/30 Python
python实现双色球随机选号
2020/01/01 Python
python通过cython加密代码
2020/12/11 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
房产分割协议书范文
2014/11/21 职场文书
担保书范本
2015/01/20 职场文书
刑事附带民事代理词
2015/05/25 职场文书
文艺节目主持词
2015/07/06 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android