canvas-炫丽的倒计时效果Canvas绘图与动画基础
2024-10-14 07:08:40
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
最新文章
- JavaScript权威设计--JavaScript类型,值,变量(简要学习笔记三)
- 两个单选按钮(一个是,一个否 ),一个div层,实现点击隐藏,显示div
- C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计
- CSS中box-sizing属性的理解与部分用法
- ARM异常中断处理
- 在Ubuntu下ADT识别不出真机的解决办法
- IOS动态修改按钮响应时间
- html+css显示代码书写版式
- .NET源码
- Spring+Spring MVC+MyBatis框架集成
- css 实现文字提示说明、文字绕图效果
- Python随笔--对象
- WPF 使用HttpListener搭建本地web服务器
- 终止执行js的方法
- 循环流程控制&;方法(3)
- Tju_Oj_3988Password
- Windows:使用Dos命令管理服务(Services)
- Eclipse 创建文件快捷菜单、避免格式化时自动换行、.properties文件中文乱码、在线安装FreeMarker
- java基础---->;多线程之yield(三)
- tensorflow之曲线拟合
热门文章
- 360安全卫士造成Sharepoint文档库”使用资源管理器打开“异常
- 阶段一:为View设置阴影和弹出动画(天气应用)
- git与github安装、配置、pull、push
- 使用c/c++扩展python
- 多War项目中静态文件的共享方案
- JAVA编程思想(第四版)学习笔记----11.10 Map
- CSS3:backgroud-size和background-origin的使用方法
- 安卓android sharepreference数据存储,保存输入框里面的数据
- utf-8 汉字对照表
- github fork后的pull和保持同步