画布创作，签名大致就是起笔落笔
前言
在画布创作过程中，签名手的基本形态是，不停的点、划。
就像我们写字一样，字越写越大，但是我们不知道笔画的大小。
一个字是一个非常小的点、横，一个横就把这个字给分成了很多。
签名时，这个点一定要画好，如果没有一定的形状的话，签名写完了再去画它肯定是废掉了。
所以说一个签名好不好看，先看它有没有形状？
没有形状不好或者太直的话就会让人觉得很难看懂它。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas自定义画板</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#container{
margin: 0 auto;
width: 1200px;
/*text-align: center;*/
}
#canvas{
border: 2px solid #ff6700;
cursor:crosshair;
/*不能用这种方式给canvas设置宽高*/
/*width: 1200px;*/
/*height: 300px;*/
}
.btn{
width:70px;
height: 40px;
border-radius: 10px;
border: 1px solid #aaa;/*去掉<button>默认边框*/
outline:none;/*去掉<button>选中时的默认边框*/
}
#image_png{
width: 300px;
height: 150px;
border: 2px solid #ff6700;
display: block;
margin: 10px auto;
}
.section{
margin-top: 10px;
}
.info{
color: #f0f;
font-size: 14px;
}
.bg{
background: #ff6700;
}
.fw{
font-weight: 700;
}
</style>
<body>
<div id="container">
<canvas id="canvas" width="1200" height="800">浏览器不支持canvas<!-- 如果不支持会显示这段文字 --></canvas>
<div class="section">
<span class="info">选择画笔颜色：</span>
<button class="btn colorBtn fw" style="background-color:yellow;" onclick='setPenColor("yellow");'>YELLOW</button>
<button class="btn colorBtn" style="background-color:red;" onclick='setPenColor("red");'>RED</button>
<button class="btn colorBtn" style="background-color:blue;" onclick='setPenColor("blue");'>BLUE</button>
<button class="btn colorBtn" style="background-color:green;" onclick='setPenColor("green");'>GREEN</button>
<button class="btn colorBtn" style="background-color:black;color:#fff" onclick='setPenColor("black");'>BLACK</button>
</div>
<div class="section">
<span class="info">选择橡皮擦：</span>
<button class="btn colorBtn" style="background-color:white;" onclick='setPenColor("white");'>WHITE</button>
</div>
<div class="section">
<span class="info">选择画笔大小：</span>
<button class="btn bg penBtn fw" onclick="setPenWidth(4);">4PX</button>
<button class="btn bg penBtn" onclick="setPenWidth(8);">8PX</button>
<button class="btn bg penBtn" onclick="setPenWidth(16);">16PX</button>
</div>
<div class="section">
<span class="info">输出画板内容到下面的图片：</span>
<button class="btn" onclick="createImage();">EXPORT</button>
</div>
<img id="image_png">
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
var canvas = document.getElementById('canvas'); //获取canvas标签
var ctx = canvas.getContext("2d");//创建 context 对象
ctx.fillStyle = "#ff7777";//画布背景色
ctx.fillRect(0,0,1200,800);//在画布上绘制 1200x300 的矩形，从左上角开始 (0,0)
var penClick = false; //画笔按下标记
var startAxisX = 0;
var startAxisY = 0;
var penColor = "yellow";//画笔颜色
var penWidth = 4;//画笔粗细
//画笔颜色选中状态
$(".colorBtn").on("click", function(event){
$(".colorBtn").removeClass('fw')
$(this).addClass('fw')
});
//画笔粗细选中状态
$(".penBtn").on("click", function(event){
$(this).addClass('fw').siblings().removeClass('fw')
});
//设置画笔颜色
function setPenColor(color){
penColor = color;
}
//设置画笔粗细
function setPenWidth(type){
penWidth = type
}
canvas.addEventListener("mousemove",drawing,true); //鼠标移动事件
canvas.addEventListener("mousedown",penDown,false); //鼠标按下事件
canvas.addEventListener("mouseup",penUp,false); //鼠标弹起事件
function penDown(event){
penClick = true;
startAxisX = event.pageX;
startAxisY = event.pageY;
}
function penUp(){
penClick = false;
}
function drawing(event){
if(!penClick)
return;
var stopAxisX = event.pageX;
var stopAxisY = event.pageY;
ctx.beginPath();
//由于整体设置了水平居中，因此需要做特殊处理：window.screen.availWidth/2 -300
ctx.moveTo(startAxisX-(window.screen.availWidth/2 -600),startAxisY);//moveTo(x,y) 定义线条开始坐标
ctx.lineTo(stopAxisX-(window.screen.availWidth/2 -600),stopAxisY);//lineTo(x,y) 定义线条结束坐标
ctx.strokeStyle = penColor;
ctx.lineWidth = penWidth;
ctx.lineCap = "round";
ctx.stroke();// stroke() 方法来绘制线条
startAxisX = stopAxisX;
startAxisY = stopAxisY;
}
function createImage() {
var img_png_src = canvas.toDataURL("image/png"); //将画板保存为图片格式的函数
console.log('=====',img_png_src);//data:image/png;base64,iVBOR.....
document.getElementById("image_png").src = img_png_src;
}
</script>
</html>
一、签名要简洁
简洁，简单，这是我比较推崇的一种签名样式。
如果你连自己都看不懂、或者说根本就说不出自己要写什么，又怎么可能写出好看的签名呢？
所以如果你要想好，就要把自己看懂和理解清楚后，再去写。
（你在画画时会注意这些吗？）
注意这个“写”字，我们说一个字有两种写法时最好的。
一个字有四种写法时，就不要一次写三个或四个。
二、签名的整体
一般签名的整体看起来会比较圆润，
而不是像书法那样，
或者说它的字很大，
而看起来显得很粗糙。
画签名的时候也要注意整体的风格，
要考虑到它是否适合签名。
三、签名中用笔
在签名中，签字笔起着很重要的作用。
（1）起笔落笔：签名主要就是把签名者在纸上的名字写下来，所以我们要有书写的感觉。
（2）起落笔：签完名之后就要进行最后一步落笔了，落笔一般都是先轻后重然后再轻到重。
（3）用墨：签名是书法艺术，用墨时需要做到三点：
1.颜色要有变化，如用淡墨可以表现出浓淡来。
2.用水要有变化，可以表现出水的流动、水的速度、笔力等，这样可以使签名更有生气。
3.颜色要自然，要协调。
四、签名中的笔形
签名的笔画，大致分为两种：
1、直笔：一种是很简单的横画，也叫细横，像柳体签名一样；
2、圆笔：一种是很圆的曲线画，也叫扁笔。
签名就像是在白纸上写字。
写字时都要横平竖直，所以我们平时写字就叫“横平竖直”。
签名也是一样，起笔落笔都有笔形和基本笔画的区别。
签名笔形很重要，它是我们签名者对自己作品和文字整体感觉的重要体现之一。
五、签名中的笔画与笔势
签名中的笔画要做到起笔要重，落笔要轻；
签名的笔势要稳，笔画才能有生机。
签名与写字不同，它不是靠一次写完，而是可以多次重复。
所以在签名中不能把每一次签完的笔都收起来，而是可以重复使用几种笔势。
这样才能让人感到有变化，也会给人留下深刻的印象。
这就是为什么签完之后还要再次签名的原因所在。
六、签名的行笔与收笔，用墨要有浓淡层次与提按节奏。
一个好的签名，可以起到点缀美化作用，但最重要的是它的实用价值。
一件好的签名作品，要有实用价值，就必须以其书法之美来衬托其艺术之美。
好签名是书法与签章有机结合的结晶。
但从另一方面讲，如果一个签字不具备艺术价值，就是败笔。
所以看一个签名是否具备观赏性并不取决于它本身，而是取决于它是否具备实用性。
签名与书体本身相比有着自己独特的魅力和内涵，因此作为一个成功书法大家的签名作品，都会具备一些共性特点。
如果能对其加以挖掘和利用，将会大大提高签名作品在艺术上的欣赏价值与社会认同价值。
七、不同的字体结构，其笔画用墨和行笔也不一样。
如：
“中”、“日”这三个字，其笔画结构都是左低右高。
如：
“中-日-金”这几个字的结构和行笔是相反的，都是左低右高，就像人一样，左边低右边高。
再比如：
“王”字的笔画和行笔都是上粗下细；而“王”字的左右两边则比较细，而中间则比较粗。所以如果在画签名时不注意看，就很容易把字写歪了。
