canvas
文章平均质量分 81
wjiaoling136
这个作者很懒,什么都没留下…
展开
-
canvas学习(一):七巧板
前几天在慕课网上学canvas的视频,因为老师讲的太好了让我觉得canvas很好玩,就跟着老师做了介个demo,这里记录一下。原视频连接如下:http://www.imooc.com/video/2435,有兴趣的同学可以去学学。效果很简单,就不上图了,直接上代码吧:1、html代码:<body><canvas id="myCanvas" style="bor...原创 2016-07-04 18:43:43 · 289 阅读 · 0 评论 -
canvas学习(十六):绘制时钟
昨天在慕课网学着用canvas绘制时钟(去看看),避免以后忘记就在这里做个记录。先上个效果图吧:这张图是静态的,实际上它是一个动态的时钟, 像平常看到的时钟一样,会一格一格走。 然后是需要掌握的数学知识:知识点1:边与角的关系这个是直角三角形中边与角的关系,比较好理解。不多说。 知识点2:弧度与角度的关系 通过以上两个知识点计算(x,y)的坐标:那个角为什么是30度?...原创 2018-01-18 10:32:12 · 482 阅读 · 0 评论 -
canvas学习(十五):学写一个字
先来张效果图:这个特效是跟着慕课网上的视频学的,视频链接如下:https://www.imooc.com/learn/284源码和技术点已经上传到附件,有需要的可以查看、下载。下面直接上代码(PS:代码中的注释是根据个人理解添加的,并不是老师原有的注释):页面结构:<!doctype html><html lang="en"> <hea...原创 2017-11-27 15:03:54 · 213 阅读 · 0 评论 -
canvas学习(十):font字体设置
canvas中的字体设置比较简单,这里就不说别的了,直接上实例代码:window.onload=function(){ var myCanvas = document.getElementById("myCanvas"); if(myCanvas.getContext("2d")){ //宽高自适应 //myCanvas.width = document.document...原创 2016-08-10 15:10:03 · 12646 阅读 · 0 评论 -
canvas学习(十四):canvas交互之isPositonInPath
先说说用到的两个方法:1、isPositonInPath(x,y):判断(x,y)是否在canvas绘制的图形所在路径中。不太理解的可以参考W3School中的“HTML5 canvas isPointInPath() 方法”2、getBoundingClientRect():这个方法用来用来获取元素位置,即获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。getBoundin...原创 2016-08-04 15:05:24 · 892 阅读 · 0 评论 -
canvas学习(十三):clip之图形剪辑
clip方法描述:canvas本来是一个大的画布,clip方法用来从原始画布中剪切任意形状和尺寸,但是一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内而不能再访问画布上的其他区域。 简单实例1:圆形的探照灯效果如图:代码如下:var circular ={x:300,y:300,radius:150,vx:Math.random()*5+5,vy:Math...原创 2016-08-03 17:40:38 · 717 阅读 · 0 评论 -
canvas学习(十二):图形透明及交叠效果设置
一、设置透明度:canvas中设置全局透明度用globalAlpha来设置,它的值基于0-1之间,默认为1表示不透明,0表示全透明。示例如下:在canvas中绘制了100个随机小球,其中有交叠的,也有分开的。window.onload=function(){ var myCanvas = document.getElementById("myCanvas"); if(m...原创 2016-08-02 10:37:09 · 1749 阅读 · 0 评论 -
canvas学习(十一):阴影
使用canvas绘制为图形添加阴影比较简单,主要是四个方法:shadowColor:设置阴影颜色 shadowOffsetX:设置图形与阴影的水平距离,也是水平偏移量。当shadowOffsetX=0时,表示阴影位于形状的正下方,shadowOffsetX=20时表示阴影位于形状 left 位置右侧的 20 像素处,当shadowOffsetX=-20时表示阴影位于形状 left ...原创 2016-08-02 10:14:29 · 383 阅读 · 0 评论 -
canvas学习(九):使用arcTo绘制一轮弯月
arcTo()函数讲起来有点绕,也不太好懂,大家可以先去这里了解了解,我就不多说了。先上个效果图: 再来个分析图:(PS:1、图中各个坐标点为假设点,作为一个特例来说,大家可以试着先写这个特例,再总结出通用方法。老师讲这个的时候,就是先做的特例,然后分析通用。我也是按照这个来的,通过特例慢慢的通用就出来了。2、不得不佩服老师的讲学方法,什么虚的都能被他整成实的来给大家分析,佩...原创 2016-07-14 18:25:24 · 368 阅读 · 0 评论 -
canvas学习(八):圆角矩形
这一篇用canvas画个圆角矩形,什么是圆角矩形呢,先上个效果图:再来个绘制的分析图(注:鼠标所在的位置为(0,0),r为边角圆形的半径,width为整个矩形的宽度,height为高度,以下的各个坐标为圆形的圆心坐标):实现代码: window.onload=function(){var myCanvas = document.getElementById("myCanvas");...原创 2016-07-14 10:08:56 · 672 阅读 · 0 评论 -
canvas学习(七):渐变
canvas中的渐变分两种:线性渐变和径向渐变,线性渐变又分为倾斜渐变、水平渐变和垂直渐变,径向渐变又称为放射状/环形的渐变。线性渐变效果图:径向渐变效果图:代码如下:var window_width = document.documentElement.clientWidth-20;var window_height = document.documentElement.clien...原创 2016-07-13 09:28:23 · 213 阅读 · 0 评论 -
canvas学习(六):五颜六色的星星之图形变换
效果图和前一篇一样,只是用的方法不一样。前一篇用代码直接设置偏移量和旋转角度,这一片使用canvas的函数进行绘制。废话不多说,直接上代码:window.onload=function(){ var myCanvas = document.getElementById("myCanvas"); if(myCanvas.getContext("2d")){ myCanvas.wi...原创 2016-07-07 13:36:08 · 276 阅读 · 0 评论 -
canvas学习(五):五颜六色的星星
先来张效果图:再来张五角星各个点坐标的计算过程图:最后上代码:window.onload=function(){ var myCanvas = document.getElementById("myCanvas"); if(myCanvas.getContext("2d")){ myCanvas.width = document.documentElement.c...原创 2016-07-07 11:31:30 · 393 阅读 · 0 评论 -
canvas学习(四):矩形
使用canvas的基本格式前面已经说过了,这里不再累赘,直接上代码:window.onload=function(){ var myCanvas = document.getElementById("myCanvas");//获取canvas对象 if(myCanvas.getContext("2d")){//判断浏览器是否支持canvas标签 var context = m...原创 2016-07-07 11:25:38 · 165 阅读 · 0 评论 -
canvas学习(三):炫丽的电子时钟
先来个效果图: 效果很不错吧,学习视频链接如下:http://www.imooc.com/learn/133。(PS:老师讲的太好,忍不住为他打个小广告了,,强烈推荐去学习啊) 1、页面结构:跟前面两个一样的,body中一个canvas标签,id为myCanvas。另外引入digit.js和countdown.js。 2、digit.js:定义了一个名为digit的全局数组...原创 2016-07-05 09:40:52 · 246 阅读 · 0 评论 -
canvas学习(二):弹跳小球
效果类似于:将玻璃球摔在地上,小球往上弹,然后越弹越低,最后在地上滚动页面结构就是在body中添加一个canvas标签,id为myCanvas。js代码如下:var WINDOW_Width=1024;//canvas的宽度var WINDOW_HEIGHT=600;//canvas的高度//定义小球的初始横坐标、纵坐标、半径、加速度、在x方向的速度、在y方向的速度、填充...原创 2016-07-05 09:18:18 · 459 阅读 · 0 评论 -
canvas学习(十九):css3 filter的十种特效
跟着慕课网上的老师学“使用canvas玩转红包”时,觉得老师讲的filter特效听酷的,就跟着老师的例子琢磨了一下,这里做个记录。 这里不讲css3的filter是什么,感兴趣的什么可以看这里。 filter的十种属性为:grayscale:灰度,取值范围0-1(表示0%的原色到100%的灰色),默认值1 sepia:褐色,取值范围0-1(表示0%的原色到100%的褐色),...原创 2018-01-31 16:03:37 · 1503 阅读 · 0 评论