由于这两年HTML5火的正热,所以研究了一下,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把。
好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用。
1、使用Canvas绘制直线:
rush:js;">
<Meta charset="UTF-8">
3、绘制矩形或正方形:
这种矩形框如果使用HTML4只能使用后台代码才能生成了,现在HTML5提供的Canvas功能却很容易就能绘制,所以说HTML5的优越性是相当高的。
rush:js;">
<Meta charset="UTF-8">
这个很简单,和上例一样,就是将fill替换成了stroke,具体详见上例。
5、绘制一个线性渐变的矩形
渐变是填充的一种相当不错的效果,结合实例2和实例3,我们可以创建一个渐变的矩形
rush:js;">
<Meta charset="UTF-8">
这里不解释了,和上边的例子相同,linewidth是控制线条的宽度的。
8、圆形渐变
rush:js;">
<Meta charset="UTF-8">