首页 / JAVASCRIPT / javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板

javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8082字，纯文字阅读大概需要12分钟。

内容图文

javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板

js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码，非常适合学习html5的canvas,必须支持html5的浏览器才能看到效果。
代码如下:


<!doctype html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>javascript结合html5 canvas实现的涂鸦板 - 分享JavaScript-sharejs.com</title> 
<meta name="Copyright" content="JavaScript分享网 http://www.sharejs.com/" /> 
<meta name="description" content="javascript结合html5 canvas实现的涂鸦板,JavaScript分享网，js脚本，网页特效，网页模板，png图标，矢量图下载" /> 
<meta content="JavaScript,分享,JavaScript代码,Ajax,jQuery,网页模板,PNG图标，矢量图" name="keywords" /> 
</head> 
<body> 
<style> 
*{margin:0;padding:0;} 
.fa{width:740px;margin:0 auto;} 
.top{margin:20px 0;} 
.top input{width:25px;height:25px;border:1px solid #fff;border-radius:4px;background:#ddd;} 
.top .i1{background:#000000;} 
.top .i2{background:#FF0000;} 
.top .i3{background:#80FF00;} 
.top .i4{background:#00FFFF;} 
.top .i5{background:#808080;} 
.top .i6{background:#FF8000;} 
.top .i7{background:#408080;} 
.top .i8{background:#8000FF;} 
.top .i9{background:#CCCC00;} 
#canvas{background:#eee;cursor:default;} 
.font input{font-size:14px;} 
.top .grea{background:#aaa;} 
</style> 
</head> 
<body> 
<div class="fa"> 
<div class="top"> 
<div id="color"> 
请选择画笔颜色： 
<input class="i1" type="button" value="" /> 
<input class="i2" type="button" value="" /> 
<input class="i3" type="button" value="" /> 
<input class="i4" type="button" value="" /> 
<input class="i5" type="button" value="" /> 
<input class="i6" type="button" value="" /> 
<input class="i7" type="button" value="" /> 
<input class="i8" type="button" value="" /> 
<input class="i9" type="button" value="" /> 
</div> 
<div class="font" id="font"> 
请选择画笔的宽度： 
<input type="button" value="细" /> 
<input type="button" value="中" class="grea"/> 
<input type="button" value="粗" /> 
</div> 
<div> 
<span id="error">如果有错误，请使用橡皮擦：</span> 
<input id="eraser" style="width:60px;font-size:14px;"type="button" value="橡皮擦" /> 
</div> 
<input id="clear" type="button" value="清除画布" style="width:80px;"/> 
<input id="revocation" type="button" value="撤销" style="width:80px;"/> 
<input id="imgurl" type="button" value="导出图片路径" style="width:80px;"/> 
</div> 
<canvas id="canvas" width="740" height="420">您的浏览器不支持 canvas 标签</canvas> 
<div id="div1"></div> 
</div> 
<div id="html"> 
</div> 
<script> 
(function(){ 
var paint={ 
init:function() 
{ 
this.load(); 
}, 
load:function() 
{ 
this.x=[];//记录鼠标移动是的X坐标 
this.y=[];//记录鼠标移动是的Y坐标 
this.clickDrag=[]; 
this.lock=false;//鼠标移动前，判断鼠标是否按下 
this.isEraser=false; 
//this.Timer=null;//橡皮擦启动计时器 
//this.radius=5; 
this.storageColor="#000000"; 
this.eraserRadius=15;//擦除半径值 
this.color=["#000000","#FF0000","#80FF00","#00FFFF","#808080","#FF8000","#408080","#8000FF","#CCCC00"];//画笔颜色值 
this.fontWeight=[2,5,8]; 
this.$=function(id){return typeof id=="string"?document.getElementById(id):id;}; 
this.canvas=this.$("canvas"); 
if (this.canvas.getContext) { 
} else { 
alert("您的浏览器不支持 canvas 标签"); 
return; 
} 
this.cxt=this.canvas.getContext('2d'); 
this.cxt.lineJoin = "round";//context.lineJoin - 指定两条线段的连接方式 
this.cxt.lineWidth = 5;//线条的宽度 
this.iptClear=this.$("clear"); 
this.revocation=this.$("revocation"); 
this.imgurl=this.$("imgurl");//图片路径按钮 
this.w=this.canvas.width;//取画布的宽 
this.h=this.canvas.height;//取画布的高 
this.touch =("createTouch" in document);//判定是否为手持设备 
this.StartEvent = this.touch ? "touchstart" : "mousedown";//支持触摸式使用相应的事件替代 
this.MoveEvent = this.touch ? "touchmove" : "mousemove"; 
this.EndEvent = this.touch ? "touchend" : "mouseup"; 
this.bind(); 
}, 
bind:function() 
{ 
var t=this; 
/*清除画布*/ 
this.iptClear.onclick=function() 
{ 
t.clear(); 
}; 
/*鼠标按下事件，记录鼠标位置，并绘制，解锁lock，打开mousemove事件*/ 
this.canvas['on'+t.StartEvent]=function(e) 
{ 
var touch=t.touch ? e.touches[0] : e; 
var _x=touch.clientX - touch.target.offsetLeft;//鼠标在画布上的x坐标，以画布左上角为起点 
var _y=touch.clientY - touch.target.offsetTop;//鼠标在画布上的y坐标，以画布左上角为起点 
if(t.isEraser) 
{ 
/* 
t.cxt.globalCompositeOperation = "destination-out"; 
t.cxt.beginPath(); 
t.cxt.arc(_x, _y,t.eraserRadius, 0, Math.PI * 2); 
t.cxt.strokeStyle = "rgba(250,250,250,0)"; 
t.cxt.fill(); 
t.cxt.globalCompositeOperation = "source-over"; 
*/ 
t.resetEraser(_x,_y,touch); 
}else 
{ 
t.movePoint(_x,_y);//记录鼠标位置 
t.drawPoint();//绘制路线 
} 
t.lock=true; 
}; 
/*鼠标移动事件*/ 
this.canvas['on'+t.MoveEvent]=function(e) 
{ 
var touch=t.touch ? e.touches[0] : e; 
if(t.lock)//t.lock为true则执行 
{ 
var _x=touch.clientX - touch.target.offsetLeft;//鼠标在画布上的x坐标，以画布左上角为起点 
var _y=touch.clientY - touch.target.offsetTop;//鼠标在画布上的y坐标，以画布左上角为起点 
if(t.isEraser) 
{ 
//if(t.Timer)clearInterval(t.Timer); 
//t.Timer=setInterval(function(){ 
t.resetEraser(_x,_y,touch); 
//},10); 
} 
else 
{ 
t.movePoint(_x,_y,true);//记录鼠标位置 
t.drawPoint();//绘制路线 
} 
} 
}; 
this.canvas['on'+t.EndEvent]=function(e) 
{ 
/*重置数据*/ 
t.lock=false; 
t.x=[]; 
t.y=[]; 
t.clickDrag=[]; 
clearInterval(t.Timer); 
t.Timer=null; 
}; 
this.revocation.onclick=function() 
{ 
t.redraw(); 
}; 
this.changeColor(); 
this.imgurl.onclick=function() 
{ 
t.getUrl(); 
}; 
/*橡皮擦*/ 
this.$("eraser").onclick=function(e) 
{ 
t.isEraser=true; 
t.$("error").style.color="red"; 
t.$("error").innerHTML="您已使用橡皮擦！"; 
}; 
}, 
movePoint:function(x,y,dragging) 
{ 
/*将鼠标坐标添加到各自对应的数组里*/ 
this.x.push(x); 
this.y.push(y); 
this.clickDrag.push(y); 
}, 
drawPoint:function(x,y,radius) 
{ 
for(var i=0; i < this.x.length; i++)//循环数组 
{ 
this.cxt.beginPath();//context.beginPath() , 准备绘制一条路径 
if(this.clickDrag[i] && i){//当是拖动而且i!=0时，从上一个点开始画线。 
this.cxt.moveTo(this.x[i-1], this.y[i-1]);//context.moveTo(x, y) , 新开一个路径，并指定路径的起点 
}else{ 
this.cxt.moveTo(this.x[i]-1, this.y[i]); 
} 
this.cxt.lineTo(this.x[i], this.y[i]);//context.lineTo(x, y) , 将当前点与指定的点用一条笔直的路径连接起来 
this.cxt.closePath();//context.closePath() , 如果当前路径是打开的则关闭它 
this.cxt.stroke();//context.stroke() , 绘制当前路径 
} 
}, 
clear:function() 
{ 
this.cxt.clearRect(0, 0, this.w, this.h);//清除画布，左上角为起点 
}, 
redraw:function() 
{ 
/*撤销*/ 
this.cxt.restore(); 
}, 
preventDefault:function(e){ 
/*阻止默认*/ 
var touch=this.touch ? e.touches[0] : e; 
if(this.touch)touch.preventDefault(); 
else window.event.returnValue = false; 
}, 
changeColor:function() 
{ 
/*为按钮添加事件*/ 
var t=this,iptNum=this.$("color").getElementsByTagName("input"),fontIptNum=this.$("font").getElementsByTagName("input"); 
for(var i=0,l=iptNum.length;i<l;i++) 
{ 
iptNum[i].index=i; 
iptNum[i].onclick=function() 
{ 
t.cxt.save(); 
t.cxt.strokeStyle = t.color[this.index]; 
t.storageColor=t.color[this.index]; 
t.$("error").style.color="#000"; 
t.$("error").innerHTML="如果有错误，请使用橡皮擦："; 
t.cxt.strokeStyle = t.storageColor; 
t.isEraser=false; 
} 
} 
for(var i=0,l=fontIptNum.length;i<l;i++) 
{ 
t.cxt.save(); 
fontIptNum[i].index=i; 
fontIptNum[i].onclick=function() 
{ 
t.changeBackground(this.index); 
t.cxt.lineWidth = t.fontWeight[this.index]; 
t.$("error").style.color="#000"; 
t.$("error").innerHTML="如果有错误，请使用橡皮擦："; 
t.isEraser=false; 
t.cxt.strokeStyle = t.storageColor; 
} 
} 
}, 
changeBackground:function(num) 
{ 
/*添加画笔粗细的提示背景颜色切换，灰色为当前*/ 
var fontIptNum=this.$("font").getElementsByTagName("input"); 
for(var j=0,m=fontIptNum.length;j<m;j++) 
{ 
fontIptNum[j].className=""; 
if(j==num) fontIptNum[j].className="grea"; 
} 
}, 
getUrl:function() 
{ 
this.$("html").innerHTML=this.canvas.toDataURL(); 
}, 
resetEraser:function(_x,_y,touch) 
{ 
/*使用橡皮擦-提醒*/ 
var t=this; 
//this.cxt.lineWidth = 30; 
/*source-over 默认,相交部分由后绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过*/ 
t.cxt.globalCompositeOperation = "destination-out"; 
t.cxt.beginPath(); 
t.cxt.arc(_x, _y, t.eraserRadius, 0, Math.PI * 2); 
t.cxt.strokeStyle = "rgba(250,250,250,0)"; 
t.cxt.fill(); 
t.cxt.globalCompositeOperation = "source-over" 
} 
}; 
paint.init(); 
})(); 
</script> 
<div style="clear:both"></div> 
</body> 
</html>

内容总结

以上是互联网集市为您收集整理的javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板全部内容，希望文章能够帮你解决javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/366677.html

来源：【匿名】

【上一篇】html中使用javascript调用本地程序(exe、doc等)实现代码【下一篇】javascript 怎么调用php方法

更多 ►

【javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板】教程文章相关的互联网学习教程文章

【JavaScript】操作Canvas画图

1、页面添加 Canvas 标签标签内可以写文字，浏览器不支持Canvas的情况下显示,2、js获取 Canvas 标签3、利用js函数画图，【线】【图】【文字】源：http://www.liaoxuefeng.com原文：http://www.cnblogs.com/oiliu/p/4793644.html

[Javascript] Gradient Fills on the HTML5 Canvas【代码】【图】

window.onload = function() {var canvas = document.getElementById("canvas"),context = canvas.getContext("2d");var gradient =context.createLinearGradient(100,100,100,200);gradient.addColorStop(1,"blue"); // show blue at the bottomgradient.addColorStop(0,"yellow"); // show yellow on the top context.fillStyle=gradient;context.fillRect(100,100,100,100); }; window.onload = function() {var canvas = ...

javascript canvas 曲线片面（上）【代码】【图】

写前面：这东西是有用武之地的也许就明天你就会用到其中的部分思想(被某人吐槽研究的东西没用我就醉了~)------------------------------------什么是曲线片面看下面！上面这个就是相对简单的双线性片面可通过4个点来控制左上角 A点顺时针依次就是 ABCD 这个东西其实就是 BA方向和 DA 方向的线性插值组合下图先沿着DA CB 方向插值再继续对 BA 方向插值生成三角坐标的代码： 1//初始点 2var dot_ar = [3new _$.Vec(0, 0)...

JavaScript强化教程——canvas【代码】

本文为 H5EDU 机构官方 HTML5培训教程，主要介绍：JavaScript强化教程 —— canvas使用 strokeText(): 使用 "Arial" 字体在画布上绘制一个高 30px 的文字（空心）： JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50);Canvas - 渐变渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下有两种不同...

如何用javascript中的canvas让图片自己旋转【图】

最近在写一个游戏，想让一个人物随着鼠标在原地旋转在网上找了找，大都是用css写的，但是我为了长远的利益着想选择使用javascript代码中的canvas来解决绘图问题其中重要的两个方法：context.translate(x,y) 用于重新设定画布的原点参数是设定的原点坐标 context.rotate(角度*Math.PI/180)让图片旋转，参数是指旋转的弧度如果要填入角度就像上面一样乘以 Math.PI/180 核心思路：转载自：http://jingyan.baidu.com/article/ab0b56...

Canvas + JS 实现简易的时钟【代码】【图】

之前学习了下html5中的canvas元素，为了练练手就实现了一个简易的时钟。时钟本身并不复杂，也没有使用图片进行美化，不过麻雀虽小五脏俱全，下面就与大家分享一下：实现效果： html代码： <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Clock</title><style type="text/css">*{margin: 0;padding: 0;}.canvas{margin-left: 20px;margin-top: 20px;border: solid...

[js高手之路] html5 canvas动画教程 - 匀速运动【代码】

匀速运动：指的是物体在一条直线上运动，并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动，它的特点是加速度为0，从定义可知，在任何相等的时间间隔内，速度大小和方向是相同的。 1 <head>2 <meta charset=‘utf-8‘ />3 <style>4 #canvas {5 border: 1px dashed #aaa;6 }7 </style>8 <script>9 window.onload = function () { 10var oCanvas = docume...

JS实现简单的Canvas画图实例

定义变量:[javascript] 代码如下:var startX; var startY; var endX; var endY; var radius; var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var select = document.getElementsByTagName("select"); var startX;var startY;var endX;var endY;var radius;var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");var select = document.getElement...

javascript – 选择合适的技术(SVG vs Canvas)【代码】

我正在编写一个用于形状操作的应用程序,这样在创建简单形状之后,用户可以通过将形状相互剪切来创建更复杂的形状(即将两个圆组合在一起形成使用单个路径而不是组存储的图8,或者执行两个圆的交叉以创建“咬”标记),并且我正在尝试决定要使用的图形库. SVG似乎可以处理开箱即用的80％功能(形状存储,移动,旋转,缩放).问题是,如果不在我自己的模块中重新创建SVG功能,其他20％(使用剪辑创建一组新的复杂多边形)似乎无法实现(我必须存储一...

js+HTML5使用canvas绘制图片方法详解【图】

这篇文章主要为大家详细介绍了js HTML5 canvas绘制图片的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了HTML5 canvas绘制图片的具体代码，供大家参考，具体内容如下demo.jswindow.onload=function() {createcanvas();drawImage(); }function createcanvas() {var CANVAS=document.getElementById(mycanvas);context=CANVAS.getContext(2d);}function drawImage() {var img=new Image();img.onload=f...

javascript – 为什么使用HTML Canvas在图像上使用CORS？【代码】

最近,我花了一些时间研究解决Web开发中一个相当常见的问题的解决方案 – 我在透明背景上处理中间对齐的徽标,但是必须在它们下面放置文本,然后它看起来好像是文本和图像之间的空白在页面之间移动.经过一些研究,我发现我可以使用画布重新对齐左下图像,并且解决方案工作得很漂亮……至少在我将解决方案集成到我们的代码库中之前发现它失败了： “无法从画布获取图像数据,因为画布已被跨源数据污染.” (说什么！？) 调查一下,违规代码位...

JS和canvas实现俄罗斯方块【图】

效果图：代码如下： <!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><p style="font-size: 20px;">键盘箭头A,D控制左右移动，S控制快速下滑。W控制变形,空格控制暂停，enter开始游戏</p><div id="box" style="width: 1000px;height: 800px;border: 1px solid pink;margin: 0 auto;position: relative;"></div></body> <script type="text/javascript"> shape_collection = {//图形顺时针旋转变形...

javascript – Canvas图像无法在Chrome中呈现(适用于FF4和IE9)【代码】

我很难过.对于我的生活,我不知道为什么这不适用于Chrome.你可以在这里看到代码： http://jsfiddle.net/corydorning/NgXSH/ 当我在FF或IE9中提取此代码时,效果很好.您会注意到,小提琴将在Chrome中与渲染元素一起使用,但它不能在小提琴之外工作. 任何帮助是极大的赞赏.这是我第一次尝试使用canvas.解决方法:问题似乎是你没有等待原始图像元素被加载.如果你稍微改变一下,它可以正常工作：$(function() {var canvas = document.createE...

Js+Canvas做出图片压缩

这次给大家带来Js+Canvas做出图片压缩，Js+Canvas做出图片压缩的注意事项有哪些，下面就是实战案例，一起来看一下。/* * 图片压缩* img 原始图片* width 压缩后的宽度* height 压缩后的高度* ratio 压缩比率 */function compress(img, width, height, ratio) { var canvas, ctx, img64;canvas = document.createElement(canvas); canvas.width = width;canvas.height = height; ctx = canvas.getContext(...

JS+Canvas实现的俄罗斯方块游戏完整实例【图】

本文实例讲述了JS+Canvas实现的俄罗斯方块游戏。分享给大家供大家参考，具体如下：试玩（没有考虑兼容低版本浏览器）：********************************************************************** 9月3日更新：修复了隐藏的比较深的BUG 加上暂停、再来一次功能速度随分数增高而递减添加log日志 ********************************************************************* 通过写这个游戏收获几点： 1、canvas的isPointInPath方法不...

首页 / JAVASCRIPT / javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板

javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板

内容导读

内容图文

内容总结

内容备注

内容手机端

【javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

CANVAS - 相关标签

HTML5 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程