html5 canvas+js鼠標拖動噴字筆刷特效

來源:http://www.xdpitk.live/js/4453.html 2019-06-21 10:47瀏覽(321) 收藏

一款非常有創意的html5 canvas+js鼠標拖動噴字筆刷特效,鼠標拖動噴出中文字符進行繪圖,文字顏色隨機,文字的大小跟拖動的速度有關,拖動速度越快則越大。
html5 canvas+js鼠標拖動噴字筆刷特效
分類:文字特效 > canvas 難易:初級
查看演示 下載資源: 13 下載資源 下載積分: 20 積分

js代碼

<script type="text/javascript">
var Xin = (function(){
	var canvas,ctx,W,H,fontsize,texts,isMouseDown,mouse,position,pos;
	function init(){
		canvas = document.createElement("canvas");
		ctx = canvas.getContext("2d");
		canvas.width = W = window.innerWidth;
		canvas.height = H = window.innerHeight;
		document.body.appendChild(canvas);
		fontsize = 3; //最小字號
		texts = '富強、民主、文明、和諧、自由、平等、公正、法治、愛國、敬業、誠信、友善、';
		isMouseDown = false;
		mouse = {x : 0, y : 0 };
		position = {x : 0, y : 0 };
		pos = 0;
		bindEvents();
	}
	function bindEvents(){
		window.onmousedown = handleMouseDown;
		window.onmousemove = handleMouseMove;
		window.onmouseup = handleMouseUp;
		window.onmouseout = handleMouseUp;
		window.onresize = handleResize;
	}
	function handleResize(){
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
	}
	function handleMouseDown(){
		isMouseDown = true;
		position.x = event.pageX;
		position.y = event.pageY;
	}
	function handleMouseMove(){
		if(isMouseDown){
			mouse.x  = event.pageX;
			mouse.y  = event.pageY;
			var d = caculateLength(mouse,position),
				fontSize = fontsize + d /2, //計算在不同鼠標速度下的文字字號
				text = texts[pos],
				stepSize = textWidth(ctx,fontSize,text); //計算位置的寬度
			if(d>stepSize){
				//計算偏離角度
				var angle = Math.atan2(mouse.y-position.y,mouse.x-position.x);
				//繪制文字
				ctx.font = fontSize + "px Arial";
				ctx.fillStyle = randC();
				ctx.save();
				ctx.translate(position.x,position.y);
				ctx.rotate(angle);
				ctx.fillText(text,0,0);
				ctx.restore();
				pos++;
				if(pos==texts.length){
					pos = 0;
				}
				//更新位置
				position.x += stepSize * Math.cos(angle);
				position.y += stepSize * Math.sin(angle);
			}
		}
	}
	function handleMouseUp(){
		isMouseDown = false;
	}
	function caculateLength(p1,p2){
		return Math.sqrt(Math.pow(p2.x-p1.x,2)+Math.pow(p2.y-p1.y,2));
	}
	function textWidth(ctx,fontSize,text){
		ctx.font = fontSize + "px Arial";
		if(ctx.fillText){
			return ctx.measureText(text).width;
		}else if(ctx.mozDrawText){
			return ctx.mozMeasureText(text);
		}
	}
	function randC(){
		return 'rgb(' + (~~(Math.random()*255)) + "," + (~~(Math.random()*255)) + "," + (~~(Math.random()*255)) + ")";
	}
	return { init : init }
})();
Xin.init();
</script>
評論0
頭像

系統已開啟自動識別垃圾評論機制,識別到的自動封號,下載出錯或者資源有問題請聯系全棧客服QQ 3007547952

1 2
重庆百变王牌app 贷款中介真赚钱吗 迷你电子记分牌led体育比分 在家兼职赚钱绣工 一个人打麻将怎样作弊 亿游彩票群 手机棋牌类赚钱软件 pk10 百度回答问题赚钱有没有风险 江西微乐南昌麻将手机 浙江11选5 支付宝 怎样赚钱 体球即时比分网007 腾讯棋牌麻将来了 贵州快3 香港人在国外赚钱不交税 云南快乐十分