html5 canvas写成的水墨大写意画笔

中国水墨大写意潇洒奔放，元气淋漓，恣意纵横。

而中国大写意用笔讲究如锥画沙，如屋漏痕，如折叉股，要古朴醇厚，怎样用程序模拟这种变幻多端难以捉摸的笔法效果，一直和围棋一样是个世界难题，但是我们可以用比较简易的办法来大致模拟。

可以笔端落于纸面随机变幻其实相当于一个个的圆点的随机变形，而一条起伏变幻的笔迹，就相当于一个个随机波动的点子的连接。

<!DOCTYPE html>
<HTML><HEAD>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<TITLE>水墨画师 易千忆学堂冰豆小李作</TITLE><STYLE TYPE="TEXT/CSS">
body{margin:0px;padding:0px;font-size:10px;font-family:"Arial Black","黑体";text-align:center;overflow:hidden;
}
button{border-radius:3px;
}
.paper{background-color:#DDDDDD;display:block;
}
.console{position:absolute;bottom:0px;width:100%;color:#FFFFFF;background-color:rgba(0,0,0,0.5);padding-bottom:10px;
}
.information{padding:10px;
}
.colors{text-align:center;background-color:rgba(0,0,0,0.3);color:#FFFFFF;display:none;padding-top:10px;padding-bottom:10px;
}
.palette{background-color:#FFFFFF;width:50px;height:50px;display:inline-block;padding:20px;box-shadow:0px 0px 20px #000000;
}
.colorShow{width:50px;height:50px;border-radius:25px;display:inline-block;background-color:#000000;}
.mouseIcon{position:absolute;top:0px;width:5px;height:5px;border-radius:2.5px;background-color:#000000;box-shadow:0px 0px 10px #FFFFFF;
}
input[type="range"]{width:50%;
}</STYLE><SCRIPT TYPE="TEXT/JAVASCRIPT">function $(id){return document.getElementById(id);}var isPaletteShow=false;var windowWidth; var windowHeight;var canvas;var context;var drawing=false;var brushSize=5;var brushStyle="#000000";var brushAlpha=1;window.οnresize=function(){windowWidth=document.documentElement.clientWidth;windowHeight=document.documentElement.clientHeight;    $("information").innerHTML="画布尺寸："+windowWidth+" X "+windowHeight;canvas=$("paper");//注意canvas的宽高无需带单位，否则会出错！canvas.width=windowWidth;canvas.height=windowHeight;context=canvas.getContext('2d');context.save(); //context.globalAlpha=0;context.fillStyle='#FFFFFF';context.fillRect(0,0,windowWidth,windowHeight); context.restore();      }window.οnlοad=function(){windowWidth=document.documentElement.clientWidth;windowHeight=document.documentElement.clientHeight;canvas=$("paper");//注意canvas的宽高无需带单位，否则会出错！canvas.width=windowWidth;canvas.height=windowHeight;context=canvas.getContext('2d');context.save();   //context.globalAlpha=0;context.fillStyle='#FFFFFF';context.fillRect(0,0,windowWidth,windowHeight); context.restore();      //鼠标运动时候绘图canvas.οnmοusemοve=function(e){//$("information").innerHTML=e.pageX+":"+e.pageY;//鼠标图标跟随$("mouseIcon").style.left=e.pageX+10+"px";$("mouseIcon").style.top=e.pageY+10+"px";//绘制         if(drawing){draw(e.pageX,e.pageY,brushSize);            }           }//如果鼠标处于按下状态才绘制canvas.οnmοusedοwn=function(){drawing=true;}canvas.οnmοuseup=function(){drawing=false;}window.οnkeypress=function(e){//$("information").innerHTML=e.keyCode;    switch(e.keyCode){//按键盘S键画笔缩小case 83:if(brushSize>0){brushSize--;$("mouseIcon").style.width=brushSize+"px";$("mouseIcon").style.height=brushSize+"px";$("mouseIcon").style.borderRadius=brushSize/2+"px";$("information").innerHTML="画笔尺寸："+brushSize;};break;case 115:if(brushSize>0){brushSize--;$("mouseIcon").style.width=brushSize+"px";$("mouseIcon").style.height=brushSize+"px";$("mouseIcon").style.borderRadius=brushSize/2+"px";$("information").innerHTML="画笔尺寸："+brushSize;};break;//按键盘W键画笔变大case 87:brushSize++;$("mouseIcon").style.width=brushSize+"px";$("mouseIcon").style.height=brushSize+"px";$("mouseIcon").style.borderRadius=brushSize/2+"px";$("information").innerHTML="画笔尺寸："+brushSize;break;case 119:brushSize++;$("mouseIcon").style.width=brushSize+"px";$("mouseIcon").style.height=brushSize+"px";$("mouseIcon").style.borderRadius=brushSize/2+"px";$("information").innerHTML="画笔尺寸："+brushSize;break;}}}//绘制function draw(x,y,r){context.save();         context.translate(x,y);rationX=Math.random();rationY=Math.random();context.scale(rationX,rationY);context.beginPath();    context.globalAlpha=brushAlpha;//context.globalAlpha=brushAlpha*Math.random();context.fillStyle=brushStyle;context.arc(0,0,r,0,2*Math.PI);context.closePath();context.fill();context.restore();      }//将canvas通过toDataURL转换成PNG图片可以保存图片到本地function saveImageInfo(){var image=canvas.toDataURL("image/png");window.location.href=image;}//通过调整滑动条改变画笔颜色  function changeColor(){var red=$("red");var green=$("green");var blue=$("blue");var alpha=$("alpha");brushAlpha=(100-alpha.value)/100;brushStyle="rgba("+red.value+","+green.value+","+blue.value+","+(100-alpha.value)/100+")";    $("colorShow").style.backgroundColor="rgba("+red.value+","+green.value+","+blue.value+","+(100-alpha.value)/100+")";   $("mouseIcon").style.backgroundColor="rgba("+red.value+","+green.value+","+blue.value+","+(100-alpha.value)/100+")";   }//显示调色板function showPalette(){if(!isPaletteShow){$("colors").style.display="block";isPaletteShow=true;}else{$("colors").style.display="none";isPaletteShow=false;      }}function help(){$("information").innerHTML="按住鼠标左键在屏幕上拖动即可绘制水墨大写意笔迹<br/>绘制的同时按键盘S键和W键可以分别缩小和增大画笔尺寸";}</SCRIPT></HEAD><BODY></BODY><canvas id="paper" class="paper"></canvas><div id="console" class="console"><div id="colors" class="colors"><div id="palette" class="palette"><div id="colorShow" class="colorShow"></div></div><br/>红    <input type="range" id="red" min="0" max="255" value="0" οnchange="changeColor()" /><br/>绿    <input type="range" id="green" min="0" max="255" value="0" οnchange="changeColor()" /><br/>蓝    <input type="range" id="blue" min="0" max="255" value="0" οnchange="changeColor()" /><br/>透明度<input type="range" id="alpha" min="0" max="100" value="0" οnchange="changeColor()" /></div><div id="information" class="information">按住鼠标左键在屏幕上拖动即可绘制水墨大写意笔迹<br/>绘制的同时按键盘S键和W键可以分别缩小和增大画笔尺寸</div><button οnclick="help()">使用说明</button><button οnclick="saveImageInfo()">保存图片</button><button οnclick="showPalette()">选择颜色</button></div><div id="mouseIcon" class="mouseIcon"></div></HTML>

html5 canvas写成的水墨大写意画笔相关推荐

HTML5 Canvas实现web画图之自由画笔
最近需要做一个类似windows附件中的画图工具,是在web页面可以自由画图的,目前用的主要是HTML5的Canvas画布来实现该功能的. 而操作Canvas主要用的是在Google上找的一个Jque ...
html5水墨效果,HTML5 Canvas 类似PS中水墨喷溅晕染的喷笔效果
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var stage = document.getElementById("stage") ...
html5在线考试倒计时,html5 canvas 实现倒计时功能
function showTime(a) { var b = { id: "showtime", //canvasid x: 60, //中心点坐标 X轴; y: 60, //中心 ...
html5 canvas手写画板下载图片至本地
html5 canvas手写画板下载图片至本地 <!DOCTYPE html> <html><head><meta charset="utf-8& ...
HTML5 canvas 在线画笔绘图工具（一）
HTML5 canvas 在线画笔绘图工具(一) 功能介绍这是我用Javascript写的第一个程序,在写的过程中走了很多弯路,所以写完之后想分享出来,给与我一样的初学者做为学习的参考,同时在 ...
HTML5 canvas 在线画笔绘图工具（三）
组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...
java 画笔粗细,javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码,非常适合学习html5的canvas,必须支持html5的浏览器才能看到效果. javascri ...
html画布画笔粗细,基于javascript html5 canvas实现可调画笔颜色/粗细/橡皮的涂鸦板...
js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码,非常适合学习html5的canvas,必须支持html5的浏览器才能看到效果. javascri ...
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板 <!doctype html> <head> <meta http-equiv= ...

html5 canvas写成的水墨大写意画笔

html5 canvas写成的水墨大写意画笔相关推荐

最新文章

热门文章