html5绘图工具canvas模拟笔迹绘画特效



82 326 109



特效描述:html5绘图工具 canvas 模拟笔迹 绘画特效,html5绘图工具使用鼠标在网页上进行写字,canvas绘画模拟笔迹特效

代码结构

1. HTML代码

<center><canvas id="canvas" width="1000" height="600">sorry!</canvas></center>
<script>
//定义获取id 元素的函数
function $(id){
	return document.getElementById(id);
}
//定义了两个数组元素。用于记录鼠标的X Y 轴的位置
var clickX = new Array();
var clickY = new Array();
var act = new Array();
var canvas = $("canvas");	//画布对象
var c = canvas.getContext("2d");
var print = false;
//鼠标按下触发
canvas.onmousedown = function(e){
	//记录当前鼠标点
	var m = window.event || e;
	print = true;
	addClick(m.clientX-this.offsetLeft,m.clientY-this.offsetTop,0);
}
//鼠标移动触发
canvas.onmousemove = function(e){
	var m = window.event || e;
	if(print){	//鼠标按下来移动的话
		addClick(m.clientX-this.offsetLeft,m.clientY-this.offsetTop,1);	//true为新的点绘画
		draw();
	}
}
//鼠标松开触发
canvas.onmouseup = function(){
	print = false;
}
//鼠标离开触发
canvas.onmouseleave = function(){
	print = false;
}
/*
 *鼠标点记录
 * x  鼠标X 轴 
 * y  鼠标Y 轴
 */
function addClick(x,y,a){
	clickX.push(x);
	clickY.push(y);
	act.push(a);
}
/*
 *开始绘画
 */
function draw(){
	c.strokeStyle = "pink";	//设置填充路径的颜色
//当两条线条交汇时,创建圆形边角:
	c.lineJoin = "round";	
	c.lineWidth = 5;
	for(var i = 0,l = clickX.length;i<l;i++){
		c.beginPath();	//开始路径绘制
		if(act[i]){
			c.moveTo(clickX[i-1],clickY[i-1]);
		}else{
			c.moveTo(clickX[i]-1,clickY[i]-1);	//新的点。为了不要和lineTo相等,所以减了一个像素。
		}
		c.lineTo(clickX[i],clickY[i]);
		c.closePath();	//结束路径绘制
		c.stroke();			//对路径进行填充
	}
}
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 拖动 拖拽 拖动插件 拖拽插件 图片拖动 图片拖拽

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到