canvas基础动画-循环从屏幕下方出现-上方消失（可切换速度，字号，单色，彩色，显示用户输入内容）

前言：这个本来想用小程序的wxcanvas写的，但是发现，微信里的wxcanvas层级最高，不能用z-index改变层级，要是想在全屏的画布上面放一些东西是不可能的，比如这个改变速度，字号，，，这些的控制按钮

或者可以在屏幕2/3的上部分做画布，1/3的下部分放控制器，控制器需要隐藏的时候，画布撑满全屏。感觉费劲！。

目前，这个是web版本。

效果

html

<div class="main">

	<canvas id="canvas">你的浏览器不支持canvas，请跟换其他浏览器试一试</canvas>
	<div class="nav">
		<div><span>速度</span>
			<ul class="runnum">
				<li val="15">慢</li>
				<li val="10">中</li>
				<li val="5">快</li>
			</ul>
		</div>
		<div><span>字号</span>
			<ul class="fontS">
				<li val="120">小</li>
				<li val="160">中</li>
				<li val="200">大 </li>
			</ul>
		</div>
		<div><span>颜色</span>
			<ul class="colors">
				<li val="#e4393c">颜色1</li>
				<li val="#024">颜色2</li>
				<li val="#ddd">颜色3 </li>
			</ul>

		</div>
		<p class="fivecolors" style="margin-top: 15px;">彩色</p>
		<input class="inputval" style="margin-top: 20px;width: 70px;" type="text" placeholder="请输入~" /><br />
		<span class="getinpVal" style="margin-top: 20px;display: inline-block;">确定</span>

	</div>
</div>

css

* {
	margin: 0;
	padding: 0;
}

.main {
	position: relative;
}

.nav {
	position: absolute;
	top: 0;
	left: 10px;
	z-index: 5;
}

.nav>div,
ul>li {
	margin-top: 10px;
}

script

$(".runnum").on("click", "li", function() {
	fontrun = $(this).attr("val");
	clearInterval(t);
	var clearcwidth = cwidth / 2
	context.clearRect(0, -clearcwidth, cheight, cwidth); //清除画布

	startPoint = cheight
	t = setInterval(function() {
		run(context);
	}, fontrun);
});
$(".fontS").on("click", "li", function() {

	fontsize = "bold " + $(this).attr("val") + "px '字体','字体','微软雅黑','宋体'";
	console.log(fontsize)
	clearInterval(t);
	var clearcwidth = cwidth / 2
	context.clearRect(0, -clearcwidth, cheight, cwidth); //清除画布

	startPoint = cheight
	t = setInterval(function() {
		run(context);
	}, fontrun);
});
$(".colors").on("click", "li", function() {

	clearInterval(timer);
	fontcolor = $(this).attr("val")

	clearInterval(t);
	//				var clearcwidth = cwidth / 2
	//				context.clearRect(0, -clearcwidth, cheight, cwidth); //清除画布

	//				startPoint = cheight
	t = setInterval(function() {
		run(context);
	}, fontrun);
});
$(".getinpVal").click(function() {

	var inputvals = $(".inputval").val();
	inputval = inputvals;

	clearInterval(t);
	var clearcwidth = cwidth / 2
	context.clearRect(0, -clearcwidth, cheight, cwidth); //清除画布

	startPoint = cheight
	t = setInterval(function() {
		run(context);
	}, fontrun);

});
$(".fivecolors").click(function() {
	clearInterval(timer);
	timer = setInterval(function() {
		fontcolor = "#" + getcolor();
	}, 300);
})

function getcolor() {
	var colors = "red";
	var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16);
	if(rand.length == 6) {
		colors = rand
	}
	return colors;
}
var timer = ""; //五彩定时器
var t = ""; //循环定时器
var context = "";
var boxheight = ""; //要运动物体高度的高度
var cwidth = "";
var cheight = "";
var startPoint = "" //运动距离
var fontrun = 10; //默认速度	
var fontsize = "bold 160px '字体','字体','微软雅黑','宋体'"; //默认字号
var fontcolor = "#024"; //默认颜色
var inputval = "请输入~"; //默认文本
window.onload = function() {
	var canvas = document.getElementById('canvas');
	//				console.log(document.documentElement.clientWidth)
	//				console.log(document.documentElement.clientHeight)
	cwidth = canvas.width = document.documentElement.clientWidth;
	cheight = canvas.height = document.documentElement.clientHeight - 4;
	context = canvas.getContext('2d'); //获得画笔
	context.translate(canvas.width / 2, 0) //移动位置
	context.rotate(Math.PI / 2); //旋转角度-180°~180°
	context.font = fontsize; //设置字体（）
	context.textBaseline = 'middle'; //在绘制文本时使用的当前文本基线
	context.fillText(inputval, canvas.height, '0'); //文字及位置(context.font要先设置)
	startPoint = canvas.height;
	boxheight = context.measureText(inputval).width //获取文本水平排列时的宽度
	t = setInterval(function() {
		run(context);
	}, fontrun);
};

function run(cxt) {
	var speed = -1; //每次移动的单位距离
	var clearcwidth = cwidth / 2
	cxt.clearRect(0, -clearcwidth, cheight, cwidth); //清除画布
	startPoint += speed;
	cxt.beginPath();
	cxt.fillStyle = fontcolor; //设置笔触的颜色
	cxt.font = fontsize; //设置字体（）
	//								console.log(startPoint);
	//								console.log(context.measureText(inputval).width);
	if(startPoint <= -context.measureText(inputval).width) {
		startPoint = cheight
	}
	cxt.fillText(inputval, startPoint, '0'); //文字及位置(context.font要先设置)
}