canvas-炫丽的倒计时效果Canvas绘图与动画基础
canvas 是基于转台来绘制的
来了解一下canvas的浏览器兼容性问题,如下图所示。(截图自can i use)
tips:刚刚拿去ie8下测了一下,什么反应都没有,提前设定好的,如果该浏览器不支持的话要提示的也不提示, 开发者工具中的Element中的代码也什么都没有。 |
HTML:
<canvas id="canvas" style="border:1px solid red;"></canvas>
JS :
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// 注意,是不加单位的,而且不建议在css中设置宽高。最好是调用width和height这两个属性
canvas.width = 1024;
canvas.height = 768;
实践:绘制直线(要非常注意,状态一定要先设置才能调stroke()方法进行绘制,如果顺序颠倒,将不会出结果,而且不报错,debugger也调不出问题来。)
// 先设置状态
context.moveTo(100, 100);
context.lineTo(700, 700);
context.lineTo(700, 100);
context.lineTo(100, 100);
context.lineWidth = 10;
context.strokeStyle = "pink";
// 再进项绘制
context.stroke();
定义一个路径:
context.moveTo(100, 100); //接受两个参数,表示x坐标和y坐标
context.lineTo(700, 700);
定义多个路径:用如下方法将要定义的状态包裹住,再调用stroke()方法,既可绘制不同状态的线条
context.beginPath();
context.closePath();
七巧板的绘制 :图1为老师绘制,图2我绘制。。哈哈哈哈,可真粗糙。下节课学习绘制圆和弧线,把canvas系统学习下来后就去尝试使用js的碰撞技术做一下七巧板的移动拼接成不同的图形
图一
图二
代码连接: https://github.com/HappyAlice/Canvas-Countdown/blob/master/Countdown.html
时间记录:2016-8-8 22:54 (明天继续更新)
2016-8-10 (嗯,一个大写的十号,今天心情真好,解决了个时间轴的问题,还有昨天开始接触了手机端,好开心~)
原文地址:http://www.cnblogs.com/lal-fighting/p/5750479.html
canvas-炫丽的倒计时效果Canvas绘图与动画基础的更多相关文章
- 炫丽的倒计时效果Canvas绘图与动画基础
前言 想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天! 一.绘制基础 1 <!DOCTYPE h ...
- 学习Canvas绘图与动画基础 制作弧和圆(五)
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 学习Canvas绘图与动画基础 绘制多条路径(四)
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 学习Canvas绘图与动画基础 为多边形着色(三)
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 学习Canvas绘图与动画基础 绘制直线(二)
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 学习Canvas绘图与动画基础 canvas入门(一)
一.创建canvas 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta char ...
- 【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习
源自慕课网 效果如下: 全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- [ html canvas createImageData 创建万花筒效果 ] canvas绘图属性 createImageData 属性讲解 及创建万花筒效果
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
- canvas的进阶 - 学习利用canvas做一个炫酷的倒计时功能
先给大家贴一张图片,因为我不会上传视频( ̄□ ̄||) ,请大家谅解了~ 如果有知道怎么上传视频的大神还请指点指点 ^_^ ~ 然后看一下代码: html部分 : <!DOCTYPE html ...
随机推荐
- ios App与网页交互
随着移动APP的快速迭代开发趋势,越来越多的APP中嵌入了html网页,但在一些大中型APP中,尤其是电商类APP,html页面已经不仅仅满足展示功能,这时html要求能与原生语言进行交互.相互传值. ...
- app字体被放大效果发虚
IOS App所有字体被放大,显示效果发虚 小小程序猿 我的博客:http://daycoding.com 分析原因: 由于新版本上线更换了LaunchImage,没有注意美工给的图片尺寸,由于图片尺 ...
- iOS提交AppStore后申请加急审核
提交审核后进去下面链接申请加急审核链接:https://developer.apple.com/appstore/contact/appreviewteam/index.html 在I would l ...
- 贝塞尔曲线(UIBezierPath)属性、方法汇总
UIBezierPath主要用来绘制矢量图形,它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的(CGContextRef),所以一般U ...
- IOS 网络浅析-(十二 UIWebView简介)
在这篇随笔里,我们只要知道UIWebView是什么就可以了. UIWebView 是苹果提供的用来展示网页的UI控件,它也是最占内存的控件. iOS8.0之后出现了webkit框架,WKWebView ...
- 在 CentOS7 上将自定义的 jar 包注册为 linux 服务 service
在 CentOS7 上将自定义的 jar 包注册为 linux 服务 service 1.在 /etc/rc.d/init.d/ 目录下创建一个名字和服务名完全相同的 shell 脚本文件 joyup ...
- EZchip花1.3亿美元买Tilera然后以8亿美元把自己与Tilera一起卖掉
2014年7月EZchip花1.3亿美元收购的Tilera2015年10 Mellanox 8亿美元收购EZchip,2016年1月完成.EZchip转手卖掉Tilera与自己? http://www ...
- 安卓Socket连接实现连接实现发送接收数据,openwrt wifi转串口连接单片机实现控制
安卓Socket连接实现连接实现发送接收数据,openwrt wifi转串口连接单片机实现控制 socket 连接采用流的方式进行发送接收数据,采用thread线程的方式. 什么是线程? 详细代码介 ...
- monkey之monkey日志分析
一.初步分析方法:Monkey测试出现错误后,一般的差错步骤为以下几步:1.找到是monkey里面的哪个地方出错2.查看Monkey里面出错前的一些事件动作,并手动执行该动作3.若以上步骤还不能找出, ...
- 常用算法——排序(一)
排序(Sort)是计算机程序设计中的一种重要操作,也是日常生活中经常遇到的问题.例如,字典中的单词是以字母的顺序排列,否则,使用起来非常困难.同样,存储在计算机中的数据的次序,对于处理这些数据的算法的 ...