微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

JavaScript实现使用Canvas绘制图形的基本教程

由于这两年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">