使用canvas绘制写字板

这是使用canvas加JavaScript来编写的写字板，可以自由自定义写字的颜色和线条粗细

这是本人在学习canvas初期时用来练手的小实例，里面有些方法名起的不是很规范，但几乎都是用拼音简写或者有注释的

大致思路：

先准备一个数组，然后通过鼠标移动事件，将鼠标每次移动的点都放入数组中，鼠标每移动一次便重新绘制canvas画布，将数组中所有的点用moveTo和lineTo方法连接起来。

具体实现：

首先编写html文件，将基本的布局准备好。

<div id="zhe"></div>
<div class="lk">
	<canvas id="canvas" width="500" height="500"></canvas>
</div>
<div class="btn"><button>清除</button></div>
<div class="ys">
	<input type="text" placeholder="请输入字体大小" />
	<span>点击选取字体颜色</span>
	<ul class="list"></ul>
</div>

然后编写这些块元素的样式;（css样式写有点乱，建议直接复制）

*{ margin: 0px; padding: 0px;}
#zhe{ background-color:rgba(0,0,0,0.7); width: 0px; position: absolute; top: 0px; height: 100%;}
.lk{ margin:130px auto; width: 500px; height: 500px; border: 1px solid #ccc;}
#canvas{ cursor: pointer;}
.btn{ position: absolute; top: 0px; left: 50%; margin-left: -50px;  width: 100px; height: 40px; }
.btn button{ width: 100%; height: 100%; line-height: 40px; color: #fff; cursor: pointer; background: #a49872;}
.btn button:focus{outline: none;}
.ys{ position: absolute; top: 50px;  left: 50%; margin-left: -60px; width:120px;  height: 40px; }
.ys input{ text-align: center; width: 90px; border: 1px solid #ccc; font-size: 8px; height: 20px; margin: auto; display: block;}
.ys span{ display: block; cursor: pointer; font-size: 14px; width: 100%; text-align: center;}
.ys span:hover{ text-decoration: underline;}
.list{ float:left; width: 100%;}
.list li{list-style-type: none; float: left; width: 20px; height: 20px; margin: 5px 5px; cursor: pointer;}

 最后是最重要的，JavaScript逻辑代码的编写

var lk=document.getElementsByClassName("lk")[0];
var zhe=document.getElementById("zhe");
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var btn=document.getElementsByClassName("btn")[0].children[0];
var ys=document.getElementsByClassName("ys")[0];
var ysChild=ys.children[1];
var ysChild2=ys.children[0];
var list=document.getElementsByClassName("list")[0];
var listChild=list.children;
var xk=1;			//字体的大小
var x=canvas.width; //画布的宽
var y=canvas.height;//画布的高
var zhi={x:0,y:0};	//下笔的初始位置
var isFal=false;	//检测是否落笔
var color=null;		//画笔的颜色
var c=0;			
var shi=0;			
var qi=null;		//手指滑动的初始位置
// 手指滑动事件
window.ontouchstart=function(e){
	var touch=e.touches[0];
	qi=touch.screenX;
}
window.ontouchmove=function(e){
	var touche=e.touches[0];
	var width=parseInt(touche.screenX-qi);
	var w=parseInt(width/2);
	if(qi<touche.screenX){
		zhe.style.cssText="width:"+w+"px; left:0%; margin-left:"+-(w/2)+"px; border-radius:70%;";
	}
}
window.ontouchend=function(e){
	var touchs=e.touches[0];
	zhe.style.cssText="width:0px; transition: all 1s;"
}
function randomColor(){
	var data=[];
	// 这是color的集合
	var color="123456789abcdef";
	for(var i=0;i<6;i++){
		var v=parseInt(Math.random()*color.length);
		data.push(color[v]);
	}
	return data.join("");
}
// 点击事件
ysChild.onclick=function(){
	shi++;
	if(shi>0){
		this.innerText="换一批"
	}
	list.innerHTML="";
	for(var i=0;i<4;i++){
		var li=document.createElement("li");
		li.className="LC";
		li.style.cssText="background-color:#"+randomColor()+";"
		list.appendChild(li);
	}
	q();
}
// 失去焦点事件
ysChild2.onblur=function(){
	xk=this.value;
}
function q(){
	for(var i=0;i<listChild.length;i++){
		listChild[i].onclick=function(){
			var col=getComputedStyle(this,null).backgroundColor;
			color=col;
		}
	}
}
q();
function windowc(x,y){
	var length=canvas.getBoundingClientRect();
	return {x:Math.round(x-length.left),y:Math.round(y-length.top)}
}

function move(pain){
	var xinzhi=windowc(pain.x,pain.y);
	ctx.save();
	ctx.beginPath();
	ctx.strokeStyle=color;
	ctx.lineWidth=xk;
	ctx.lineCap="round";
	ctx.textJoin="round";
	ctx.moveTo(zhi.x,zhi.y);
	ctx.lineTo(xinzhi.x,xinzhi.y);
	ctx.closePath();
	ctx.stroke();
	ctx.restore();
	zhi=xinzhi;
}
function jes(){
	isFal=false;
}
canvas.onmouseout=function(e){
	e.preventDefault();
	isFal=false;
}
canvas.onmousedown=function(e){
	e.preventDefault();
	zhi=windowc({x:e.clientX,y:e.clientY});
	isFal=true;
}
canvas.onmousemove=function(e){
	e.preventDefault();
	if(isFal){
		move({x:e.clientX,y:e.clientY});
	}
}
canvas.onmouseup=function(e){
	e.preventDefault();
	jes()
}
canvas.addEventListener("touchstart",function(e){
	e.preventDefault();
	touch=e.touches[0];
	zhi=windowc({x:touch.pageX,y:touch.pageY});
	isFal=true;
})
canvas.addEventListener("touchmove",function(e){
	e.preventDefault();
	touch=e.touches[0];
	if(isFal){
		move({x:touch.pageX,y:touch.pageY});
	}
})
canvas.addEventListener("touchend",function(e){
	e.preventDefault();
		touch=e.touches[0];
	jes();
})
// 绘制方格中间的红线
function hua(){
	ctx.save();
	ctx.beginPath();
	ctx.setLineDash([2, 2]);
	ctx.strokeStyle="rgba(253, 56, 56, 0.622)";
	ctx.moveTo(0,0);
	ctx.lineTo(x,y);
	
	ctx.moveTo(x,0);
	ctx.lineTo(0,y);	
	
	ctx.moveTo(0,y/2);
	ctx.lineTo(x,y/2);			
	
	ctx.moveTo(x/2,0);
	ctx.lineTo(y/2,y);
	
	ctx.closePath();
	ctx.stroke();
	ctx.restore();
}
function clear(){
	btn.onclick=function(){
		ctx.clearRect(0,0,x,y);
		hua()
	}
}
hua();
clear()

实现效果