手把手教你用canvas画动态直线

最新推荐文章于 2024-03-25 10:25:21 发布

置顶

VIP文章 web小菜鸟ing

最新推荐文章于 2024-03-25 10:25:21 发布

阅读量2.9w

点赞数 9

分类专栏： Java Web原创教程文章标签： java web canvas 画直线 canvas动态画直线 HTML5

本文链接：https://blog.csdn.net/wuhawang/article/details/52886643

版权

自己闲来无事的时候，就想学学热火了好久的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; //保存第二段输入的值的个数

每个参数的代表的含义如注释所示

2.2 document.ready

最低0.47元/天解锁文章

web小菜鸟ing

关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
手把手教你用canvas画动态直线

自己闲来无事的时候，就想学学热火了好久的H5然后就看了下canvas不看不知道，一看下一条，H5我以为没啥，原来都开始提供各种接口和函数了，我滴乖乖canvas主要是用来画图的，结合定时器（setInterval）函数能够作出精美的动画下面我就简单的给大家介绍下canvas怎么使用vanvas的介绍这里就不多说了，大家可以自行百度。1.jsp页面首先，jsp
复制链接

扫一扫