自己闲来无事的时候,就想学学热火了好久的H5
然后就看了下canvas
不看不知道,一看下一条,H5我以为没啥,原来都开始提供各种接口和函数了,我滴乖乖
canvas主要是用来画图的,结合定时器(setInterval)函数能够作出精美的动画
下面我就简单的给大家介绍下canvas怎么使用
vanvas的介绍这里就不多说了,大家可以自行百度。
1.jsp页面
首先,jsp页面很简单
<body>
<div class="container">
输入汉字<input id="inputSomeThing" οninput="getInput(this.value)"></input>
输入个数<input id="numOfTranIO"></input>
<input οnclick="draw()" value="生成" type="button" />
<canvas id="myCanvas" width="1150" height="500"
style="border:1px solid #000000;">
</canvas>
<input οnclick="draw()" value="111" type="button" />
</div>
</body>
我们添加了一个输入汉字的input和一个输入个数的input,还有一个id为myCanvas的画布
2.js部分
首先看js代码第一部分
2.1 全局变量
全局变量定义如下所示
var ctx;//全局的画布标识
var width=1150; //设置线条获得区域宽度
var height=500; //设置线条获得区域高度
var x; //设置线条起点
var i = 0; //记录线条长度
var exp=1; //设置线条每次移动像素大小
var string;//用来存储用户输入的值
var tranIOLenth; //第二段横线之间的间隔
var tranIOZuoBiao = {}; //用来存储第二段横线的起始点坐标,用map形式存储
var tnumOfTranIO; //保存第二段输入的值的个数
每个参数的代表的含义如注释所示