利用面向对象的思路在canvas中为图片添加飘雪效果

平时看到不错的冬景照片想收藏起来,如果将其添加上飘雪的效果,更加美不胜收,比如下面效果   下面分享一下如果利用canvas为图片添加飘雪效果,先看代码,再分析; Document canvas { border:1px solid red; /*添加背景图片...

2016-12-21 20:02:17

阅读数:884

评论数:0

利用canvas实现鼠标拖拽效果的一种方法

利用canvas实现鼠标拖拽功能,当在元素上按下鼠标并移动时,元素跟着鼠标移动。 效果: 主要思路: 当鼠标按下时,利用isPointInPath判断鼠标位置是否在元素上,如果在则鼠标移动时元素跟着移动;当鼠标抬起时,将鼠标移动事件和抬起事情置空。 代码如下: var can = ...

2016-12-21 18:48:22

阅读数:5990

评论数:2

利用canvas绘制折线图的一种方法

利用canvas绘制折线图 效果: 思路: 1)给出来的数值和横坐标数据整体是没有规律的,分别将它们保存在数组nums和datas中。并 2)只有两个坐标线,定义一个函数drawBorder绘制这两条线; 3)考虑到折线是四段,这里定义一个函数drawLine绘制折线,用一个...

2016-12-21 18:27:35

阅读数:5689

评论数:1

利用canvas绘制饼状图一种方法

利用canvas绘制饼状图以及上面对应的占比数值,方法很多,下面分享其中一种方法。 效果 思路: 1)将每块饼的占比以整数形式储存在数组nums中,将每个饼的颜色以字符串形式储存在数组colors中,两个数组的值一一对应。将画布旋转坐标定义在即将绘制圆的中心,定义绘制圆弧(饼)的...

2016-12-21 17:42:19

阅读数:5585

评论数:0

利用canvas绘制柱状图的一种方法

利用canvas绘制简单的柱状图: 如图所示是想要的最终效果: 思路: 1) 将每个柱子颜色取出来保存在数组colors中,将每个柱子数值取出来保存在数组nums中,规定每个柱子宽度为60,间隔为30 2) 根据for循环的数量的判断,绘制行线、横坐标和侧边线可以放在一个for循环里面,绘制...

2016-12-21 17:13:57

阅读数:1328

评论数:0

分别利用html+js和canvas绘制时钟

分别利用原生JS和画布画出时钟 1.原生JS绘制始终 思路: 1)在body中构建好始终的静态DOM结构 2)在CSS中设置好DOM结构的样式 3)在js文件中设置DOM的运动样式 视图文件: 1 2 3 4 5 ...

2016-12-21 16:48:57

阅读数:644

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭