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

最新推荐文章于 2021-10-26 13:03:20 发布

一粒马豆

最新推荐文章于 2021-10-26 13:03:20 发布

阅读量6.6k

点赞数 3

文章标签： html5 canvas javascript 水墨大写意

本文链接：https://blog.csdn.net/maillibin/article/details/51493701

版权

本文探讨如何使用HTML5的Canvas结合JavaScript技术，模拟中国传统水墨画中大写意的画笔效果。通过随机变形的圆点及波动的点子连接，尝试再现大写意画笔的古朴醇厚与潇洒不羁。

摘要由CSDN通过智能技术生成

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

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

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

<!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 windowWid