canvas学习(十九):css3 filter的十种特效

跟着慕课网上的老师学“使用canvas玩转红包”时,觉得老师讲的filter特效听酷的,就跟着老师的例子琢磨了一下,这里做个记录。   这里不讲css3的filter是什么,感兴趣的什么可以看这里。   filter的十种属性为: grayscale:灰度,取值范围0-1(表示0%的...

2018-01-31 16:03:37

阅读数 82

评论数 0

canvas学习(十六):绘制时钟

昨天在慕课网学着用canvas绘制时钟(去看看),避免以后忘记就在这里做个记录。 先上个效果图吧:这张图是静态的,实际上它是一个动态的时钟, 像平常看到的时钟一样,会一格一格走。   然后是需要掌握的数学知识: 知识点1:边与角的关系这个是直角三角形中边与角的关系,比较好理解。不多说。...

2018-01-18 10:32:12

阅读数 50

评论数 0

canvas学习(十五):学写一个字

先来张效果图: 这个特效是跟着慕课网上的视频学的,视频链接如下:https://www.imooc.com/learn/284 源码和技术点已经上传到附件,有需要的可以查看、下载。 下面直接上代码(PS:代码中的注释是根据个人理解添加的,并不是老师原有的注释): 页面结构: &...

2017-11-27 15:03:54

阅读数 29

评论数 0

canvas学习(十):font字体设置

canvas中的字体设置比较简单,这里就不说别的了,直接上实例代码: window.onload=function(){ var myCanvas = document.getElementById("myCanvas"); if(myCanvas....

2016-08-10 15:10:03

阅读数 612

评论数 0

canvas学习(十四):canvas交互之isPositonInPath

先说说用到的两个方法: 1、isPositonInPath(x,y):判断(x,y)是否在canvas绘制的图形所在路径中。不太理解的可以参考W3School中的“HTML5 canvas isPointInPath() 方法” 2、getBoundingClientRect():这个方法用...

2016-08-04 15:05:24

阅读数 66

评论数 0

canvas学习(十三):clip之图形剪辑

clip方法描述: canvas本来是一个大的画布,clip方法用来从原始画布中剪切任意形状和尺寸,但是一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内而不能再访问画布上的其他区域。   简单实例1:圆形的探照灯 效果如图: 代码如下: var circular ={...

2016-08-03 17:40:38

阅读数 84

评论数 0

canvas学习(十二):图形透明及交叠效果设置

一、设置透明度: canvas中设置全局透明度用globalAlpha来设置,它的值基于0-1之间,默认为1表示不透明,0表示全透明。 示例如下: 在canvas中绘制了100个随机小球,其中有交叠的,也有分开的。 window.onload=function(){ var myC...

2016-08-02 10:37:09

阅读数 64

评论数 0

canvas学习(十一):阴影

使用canvas绘制为图形添加阴影比较简单,主要是四个方法: shadowColor:设置阴影颜色   shadowOffsetX:设置图形与阴影的水平距离,也是水平偏移量。当shadowOffsetX=0时,表示阴影位于形状的正下方,shadowOffsetX=20时表示阴影位于形状 ...

2016-08-02 10:14:29

阅读数 25

评论数 0

canvas学习(九):使用arcTo绘制一轮弯月

arcTo()函数讲起来有点绕,也不太好懂,大家可以先去这里了解了解,我就不多说了。 先上个效果图:  再来个分析图: (PS: 1、图中各个坐标点为假设点,作为一个特例来说,大家可以试着先写这个特例,再总结出通用方法。老师讲这个的时候,就是先做的特例,然后分析通用。我也是按照这个来的,...

2016-07-14 18:25:24

阅读数 77

评论数 0

canvas学习(八):圆角矩形

这一篇用canvas画个圆角矩形,什么是圆角矩形呢,先上个效果图: 再来个绘制的分析图(注:鼠标所在的位置为(0,0),r为边角圆形的半径,width为整个矩形的宽度,height为高度,以下的各个坐标为圆形的圆心坐标):实现代码: window.onload=function(){ ...

2016-07-14 10:08:56

阅读数 96

评论数 0

canvas学习(七):渐变

canvas中的渐变分两种:线性渐变和径向渐变,线性渐变又分为倾斜渐变、水平渐变和垂直渐变,径向渐变又称为放射状/环形的渐变。 线性渐变效果图:径向渐变效果图:代码如下: var window_width = document.documentElement.clientWidth-20; ...

2016-07-13 09:28:23

阅读数 36

评论数 0

canvas学习(六):五颜六色的星星之图形变换

效果图和前一篇一样,只是用的方法不一样。前一篇用代码直接设置偏移量和旋转角度,这一片使用canvas的函数进行绘制。废话不多说,直接上代码: window.onload=function(){ var myCanvas = document.getElementById(&quot...

2016-07-07 13:36:08

阅读数 42

评论数 0

canvas学习(五):五颜六色的星星

先来张效果图: 再来张五角星各个点坐标的计算过程图: 最后上代码: window.onload=function(){ var myCanvas = document.getElementById("myCanvas"); if(myCan...

2016-07-07 11:31:30

阅读数 97

评论数 0

canvas学习(四):矩形

使用canvas的基本格式前面已经说过了,这里不再累赘,直接上代码: window.onload=function(){ var myCanvas = document.getElementById("myCanvas");//获取canvas对象 ...

2016-07-07 11:25:38

阅读数 25

评论数 0

canvas学习(三):炫丽的电子时钟

先来个效果图: 效果很不错吧,学习视频链接如下:http://www.imooc.com/learn/133。 (PS:老师讲的太好,忍不住为他打个小广告了,,强烈推荐去学习啊)   1、页面结构:跟前面两个一样的,body中一个canvas标签,id为myCanvas。另外引入digi...

2016-07-05 09:40:52

阅读数 94

评论数 0

canvas学习(二):弹跳小球

效果类似于:将玻璃球摔在地上,小球往上弹,然后越弹越低,最后在地上滚动 页面结构就是在body中添加一个canvas标签,id为myCanvas。 js代码如下: var WINDOW_Width=1024;//canvas的宽度 var WINDOW_HEIGHT=600;//canv...

2016-07-05 09:18:18

阅读数 34

评论数 0

canvas学习(一):七巧板

前几天在慕课网上学canvas的视频,因为老师讲的太好了让我觉得canvas很好玩,就跟着老师做了介个demo,这里记录一下。原视频连接如下:http://www.imooc.com/video/2435,有兴趣的同学可以去学学。 效果很简单,就不上图了,直接上代码吧: 1、html代码:...

2016-07-04 18:43:43

阅读数 54

评论数 0

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