canvas学习（十五）：学写一个字

wjiaoling136

浏览: 955027 次
性别:
来自: 北京

最近访客更多访客>>

747017186

chajinglong

1017401036

温开水

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

canvas
慕课

canvas 画板写字

先来张效果图：

这个特效是跟着慕课网上的视频学的，视频链接如下：https://www.imooc.com/learn/284

源码和技术点已经上传到附件，有需要的可以查看、下载。

下面直接上代码（PS：代码中的注释是根据个人理解添加的，并不是老师原有的注释）：

页面结构：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>canvas学习-学写一个字</title>
  <link type="text/css" href="handwriting.css" rel="stylesheet"/>
  <meta name="viewport"
		content="height=device-height,
				width=device-width,
				initial-scale=1.0,
				minimum-scale=1.0,
				maximum-scale=1.0,
				user-scalable=no"/>
  <script type="text/javascript" src="handwriting.js"></script>
  <script type="text/javascript" src="jquery.min.js"></script>
 </head>
 <body>
  <canvas id="myCanvas">
		您的浏览器不支持canvas，请换个浏览器试试
		<!--这句话在支持canvas的浏览器中会被忽略，不支持的则会显示出来-->
	</canvas>
	
	<!--颜色选择和清除 -->
	<div id="controller">
		<div id="black_btn" class="color_btn color_btn_selected"></div>
		<div id="red_btn" class="color_btn"></div>
		<div id="orange_btn" class="color_btn"></div>
		<div id="yellow_btn" class="color_btn"></div>
		<div id="green_btn" class="color_btn"></div>
		<div id="cyan_btn" class="color_btn"></div>
		<div id="blue_btn" class="color_btn"></div>		

		<div id="clear_btn" class="op_btn">清&nbsp;除</div>
		<div class="clearfix"></div>
	</div>
 </body>
</html>

CSS样式：

#myCanvas{
	height:100%;
	display:block;
	margin:0 auto;
}
#controller{
	margin:0 auto;
}
.op_btn{
	float:right;
	margin:10px 0 0 10px;
	border:2px solid #aaa;
	width:80px;
	height:40px;
	line-height:40px;
	font-size:20px;
	text-align:center;
	border-radius:5px 5px;
	cursor:pointer;
	background-color:white;
	font-weight:bold;
	font-family:Microsoft Yahei,Arial;
}
.op_btn:hover{
	background-color:#def;
}
.clearfix{
	clear:both;
}
.color_btn{
	float:left;
	margin:10px 5px 0 0;
	border:5px solid white;
	width:40px;
	height:40px;
	border-radius:5px 5px;
	cursor:pointer;
}
.color_btn:hover{
	border:5px solid violet;
}
.color_btn_selected{
	border:5px solid blueviolet;
}
#black_btn{
	background-color:black;
}
#red_btn{
	background-color:red;
}
#orange_btn{
	background-color:orange;
}
#yellow_btn{
	background-color:yellow;
}
#green_btn{
	background-color:green;
}
#blue_btn{
	background-color:blue;
}
#cyan_btn{
	background-color:cyan;
}

JS代码：

//学习链接：http://www.imooc.com/learn/284
var windowWidth = 600;
var windowHeight = 600;
var isMouseDowm=false;//鼠标是否按下

var myCanvas = null;
var context = null;
var lastLoc = {x:0,y:0};//鼠标最后一个落脚点
var lastTimestamp=0;
var lastLineWidth = -1;//最后一次笔画的大小
	
var strokeColor = "black";
window.onload=function(){
	myCanvas = document.getElementById("myCanvas");
	if(myCanvas.getContext("2d")){
		windowWidth = document.documentElement.clientWidth-20;
		windowHeight = document.documentElement.clientHeight-20-60;//60:清除按钮所需要的高度
		//取两个数中最小的那个值
		if(windowWidth>windowHeight){windowWidth = windowHeight;}
		else{windowHeight = windowWidth;}
		//alert(windowWidth);
		myCanvas.width = windowWidth;
		myCanvas.height = windowHeight;
		context =myCanvas.getContext("2d");
		//alert(myCanvas.width+"\n"+myCanvas.height);
	
		//控制功能区的大小
		$("#controller").css("width",windowWidth+"px");
		//绘制一个米字格
		drawGird();

		//阻止鼠标的默认事件
		myCanvas.onmousedown=function(e){
			e.preventDefault();
			//console.log("mouse down");
			startStroke({x:e.clientX,y:e.clientY});
		}
		myCanvas.onmouseup=function(e){
			e.preventDefault();
			//console.log("mouse up");
			endStroke();
		}
		myCanvas.onmouseout=function(e){
			e.preventDefault();
			//console.log("mouse out");
			endStroke();
		}
		myCanvas.onmousemove=function(e){
			e.preventDefault();
			if(isMouseDowm){
				//console.log("mouse move");
				moveStroke({x:e.clientX,y:e.clientY});
			}
		}

		//添加触控事件
		myCanvas.addEventListener("touchstart",function(e){
			e.preventDefault();
			var touch = e.touches[0];//只获取一个触控点
			startStroke({x:touch.pageX,y:touch.pageY});
		});
		myCanvas.addEventListener("touchend",function(e){
			e.preventDefault();
			endStroke();
		});
		myCanvas.addEventListener("touchmove",function(e){
			e.preventDefault();
			if(isMouseDowm){
				var touch = e.touches[0];//只获取一个触控点
				moveStroke({x:touch.pageX,y:touch.pageY});
			}
		});

		//清除功能
		document.getElementById("clear_btn").onclick=function(){
			//清除画布中的内容
			context.clearRect(0,0,windowWidth,windowHeight);
			//重新绘制米字格
			drawGird();
		}

		//选择颜色功能
		$(".color_btn").click(function(){
			//清除选中状态
			$(".color_btn").removeClass("color_btn_selected");
			$(this).addClass("color_btn_selected");
			strokeColor = $(this).css("background-color");
		});
		
	}else{
		return false;
	}
}

//开始绘制
function startStroke(point){
	isMouseDowm=true;
	lastLoc = windowToCanvas(point.x,point.y);
	lastTimestamp = new Date().getTime();
	//alert(lastLoc.x+","+lastLoc.y);
}

//结束绘制
function endStroke(){
	isMouseDowm=false;
}

//绘制过程中
function moveStroke(point){
	//获取鼠标所在canvas的当前位置
	var curLoc = windowToCanvas(point.x,point.y);
	
	//添加“根据写字速度的快慢调整笔画大小”的应用
	//计算两个点之间的距离
	var s = calcDistance(curLoc,lastLoc);
	//计算绘制两个点需要的时间
	var curTimestamp = new Date().getTime();
	var t = curTimestamp-lastTimestamp;//使用当前时间减去最后一个落笔的时间
	//根据s和t的值计算线的宽度
	var lineWidth = calcLineWidth(s,t);

	//alert(curLoc);
	context.beginPath();
	context.moveTo(lastLoc.x,lastLoc.y);
	context.lineTo(curLoc.x,curLoc.y);
	context.closePath();
	context.strokeStyle = strokeColor;
	context.lineCap="round";
	context.lineJoin="round";
	context.lineWidth = lineWidth;
	context.stroke();

	lastLoc = curLoc;
	lastTimestamp = curTimestamp;
	lastLineWidth = lineWidth;
}

//该方法用来将窗口坐标转换成canvas中的坐标
function windowToCanvas(x,y){
	var bbox = myCanvas.getBoundingClientRect();
	return {x:Math.round(x-bbox.left),y:Math.round(y-bbox.top)};
}

//该方法用来计算两个点之间的距离
function calcDistance(loc1,loc2){
	return Math.sqrt((loc1.x-loc2.x)*(loc1.x-loc2.x)+(loc1.y-loc2.y)*(loc1.y-loc2.y));
}

//该方法根据路程和时间计算速度，依次计算线条宽度
function calcLineWidth(s,t){
	var v = s/t;
	//先判断运笔速度较快和较慢时的情况
	var min = 5,max = 20;//笔画大小
	var min2 = 0.5,max2=10;//运笔速度大小
	var result = min;
	if(v<=min2){//运笔速度特别慢，那么笔画应该特别大
		result = max;
	}else if(v>=max2){//运笔速度特别快，那么笔画应该特别小
		result = min;
	}else{//不快也不慢的情况下，使用差值的方式逐渐减
		//计算方法：使用最大值-(当前速度与最小速度之间的差值)占(最大速度与最小速度之间差值)的比例 * （最大笔画与最小笔画之间的差值）
		result = max - (v-min2)/(max2-min2)*(max-min)
	}

	//解决平滑问题
	if(lastLineWidth==-1){//说明还没有赋值
		return result;
	}

	return lastLineWidth*3/4+result*1/4;
}

//该方法用来绘制米字格
function drawGird(){
	context.save();
	//绘制一个红色的正方形
	context.strokeStyle="rgb(230,11,9)";
	context.beginPath();
	context.rect(0,0,windowWidth,windowWidth);
	context.closePath();
	context.lineWidth = 5;
	context.stroke();

	//绘制米字格
	context.beginPath();
	context.moveTo(0,0);
	context.lineTo(windowWidth,windowHeight);

	context.moveTo(windowWidth/2,0);
	context.lineTo(windowWidth/2,windowHeight);

	context.moveTo(windowWidth,0);
	context.lineTo(0,windowHeight);

	context.moveTo(0,windowHeight/2);
	context.lineTo(windowWidth,windowHeight/2);

	context.closePath();
	context.lineWidth = 1;
	context.stroke();
	context.restore();
}

handwriting.zip (67.9 KB)
下载次数: 0

查看图片附件

分享到：

驱动程序无法通过使用安全套接字层(SSL)加 ... | 图片预加载学习(三)：无序加载之图片切换

2017-11-27 15:03
浏览 866
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

canvas学习（十五）：学写一个字

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

canvas学习（十五）：学写一个字

评论

发表评论

相关推荐

canvas学习（十九）：css3 filter的十种特效

canvas学习（十八）：玩转红包

canvas学习（十七）：2048

canvas学习（十六）：绘制时钟

图片预加载学习(三)：无序加载之图片切换

图片预加载学习(二)：有序加载之图片切换

图片预加载学习(一)：无序加载之图片切换

用JS实现放大镜特效

canvas学习（十）：font字体设置

canvas学习（十四）：canvas交互之isPositonInPath

canvas学习（十三）：clip之图形剪辑

canvas学习（十二）：图形透明及交叠效果设置

canvas学习（十一）：阴影

canvas学习（九）：使用arcTo绘制一轮弯月

canvas学习（八）：圆角矩形

canvas学习（七）：渐变

canvas学习（六）：五颜六色的星星之图形变换

canvas学习（五）：五颜六色的星星

canvas学习（四）：矩形

canvas学习（二）：弹跳小球

最近访客更多访客>>