html5 canvas写成的水墨大写意画笔
2016-05-24 21:30
447 查看
中国水墨大写意潇洒奔放，元气淋漓，恣意纵横。
而中国大写意用笔讲究如锥画沙，如屋漏痕，如折叉股，要古朴醇厚，怎样用程序模拟这种变幻多端难以捉摸的笔法效果，一直和围棋一样是个世界难题，但是我们可以用比较简易的办法来大致模拟。
可以笔端落于纸面随机变幻其实相当于一个个的圆点的随机变形，而一条起伏变幻的笔迹，就相当于一个个随机波动的点子的连接。
<!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.onresize=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.onload=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.onmousemove=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.onmousedown=function(){
drawing=true;
}
canvas.onmouseup=function(){
drawing=false;
}
window.onkeypress=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" onchange="changeColor()" />
<br/>绿 <input type="range" id="green" min="0" max="255" value="0" onchange="changeColor()" />
<br/>蓝 <input type="range" id="blue" min="0" max="255" value="0" onchange="changeColor()" />
<br/>透明度<input type="range" id="alpha" min="0" max="100" value="0" onchange="changeColor()" />
</div>
<div id="information" class="information">
按住鼠标左键在屏幕上拖动即可绘制水墨大写意笔迹
<br/>绘制的同时按键盘S键和W键可以分别缩小和增大画笔尺寸
</div>
<button onclick="help()">使用说明</button>
<button onclick="saveImageInfo()">保存图片</button>
<button onclick="showPalette()">选择颜色</button>
</div>
<div id="mouseIcon" class="mouseIcon"></div>
</HTML>
而中国大写意用笔讲究如锥画沙，如屋漏痕，如折叉股，要古朴醇厚，怎样用程序模拟这种变幻多端难以捉摸的笔法效果，一直和围棋一样是个世界难题，但是我们可以用比较简易的办法来大致模拟。
可以笔端落于纸面随机变幻其实相当于一个个的圆点的随机变形，而一条起伏变幻的笔迹，就相当于一个个随机波动的点子的连接。
<!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.onresize=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.onload=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.onmousemove=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.onmousedown=function(){
drawing=true;
}
canvas.onmouseup=function(){
drawing=false;
}
window.onkeypress=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" onchange="changeColor()" />
<br/>绿 <input type="range" id="green" min="0" max="255" value="0" onchange="changeColor()" />
<br/>蓝 <input type="range" id="blue" min="0" max="255" value="0" onchange="changeColor()" />
<br/>透明度<input type="range" id="alpha" min="0" max="100" value="0" onchange="changeColor()" />
</div>
<div id="information" class="information">
按住鼠标左键在屏幕上拖动即可绘制水墨大写意笔迹
<br/>绘制的同时按键盘S键和W键可以分别缩小和增大画笔尺寸
</div>
<button onclick="help()">使用说明</button>
<button onclick="saveImageInfo()">保存图片</button>
<button onclick="showPalette()">选择颜色</button>
</div>
<div id="mouseIcon" class="mouseIcon"></div>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- 最后一次说说闭包
- Ajax
- HTML5调用摄像头实例
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证（升级版）
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）
- JavaScript拆分字符串时产生空字符的原因