頭像

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

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

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

程序員,你不是一個人;網站開發QQ群:35248186,在線充值,或聯系QQ321037704直接充值

查看演示 下載資源: 6

手機掃碼訪問:

下載資源 下載積分: 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 2589223951

1 2
重庆百变王牌app