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绘图与动画基础的更多相关文章

  1. 炫丽的倒计时效果Canvas绘图与动画基础

    前言 想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天! 一.绘制基础 1 <!DOCTYPE h ...

  2. 学习Canvas绘图与动画基础 制作弧和圆(五)

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...

  3. 学习Canvas绘图与动画基础 绘制多条路径(四)

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...

  4. 学习Canvas绘图与动画基础 为多边形着色(三)

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...

  5. 学习Canvas绘图与动画基础 绘制直线(二)

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...

  6. 学习Canvas绘图与动画基础 canvas入门(一)

    一.创建canvas 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta char ...

  7. 【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习

    源自慕课网 效果如下: 全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. [ html canvas createImageData 创建万花筒效果 ] canvas绘图属性 createImageData 属性讲解 及创建万花筒效果

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  9. canvas的进阶 - 学习利用canvas做一个炫酷的倒计时功能

    先给大家贴一张图片,因为我不会上传视频( ̄□ ̄||) ,请大家谅解了~  如果有知道怎么上传视频的大神还请指点指点 ^_^ ~ 然后看一下代码: html部分 :  <!DOCTYPE html ...

随机推荐

  1. UIViewControllerTransitioningDelegate, UIViewControllerAnimatedTransitioning

    #import "ModelAnimationDelegate.h" #import <UIKit/UIKit.h> #import "MapVC.h&quo ...

  2. Select into 的特点

    使用 Select * into NewTable From OldTable  来生成新表的技能已经使用得好熟练了~但是有些东西还是需要注意一下.下面我就来分享几个栗子 使用select into ...

  3. 【msql】关于redo 和 undo log

    InnoDB 有两块非常重要的日志,一个是undo log,另外一个是redo log,前者用来保证事务的原子性以及InnoDB的MVCC,后者用来保证事务的持久性.和大多数关系型数据库一样,Inno ...

  4. 安装linxu6.4

    RHEL6.3系统安装 进入安装界面 这里选择跳过 点击下一步 选择安装语言 选择键盘 选择系统储存方式 选择是否格式化储存设备 给安装的系统一个计算机名 选择时区 给root一个密码 可以忽略或给一 ...

  5. 【Linux命令】文件和目录操作命令

    本文主要用于常用命令的备忘,具体用法可用man查看,或查询其他资料. cd:改变工作目录 ls:列出目录的内容 mkdir:创建一个目录 cat:连接并显示指定的一个和多个文件的有关信息 cp:将给出 ...

  6. Ubuntu Server 设置PPTP客户端连接

    安装PPTP客户端 apt-get install pptp-linux 设置连接账号信息 sudo vim /etc/ppp/chap-secrets 其中$login_name是登录名:$pass ...

  7. Practical oral English

    1.如果你继续发烧,我就去请医生过来If your fever continues, I'll send for the doctor.2.在这么大的停车场里,我是永远都找不到我的车的I'll nev ...

  8. WinCE项目应用之车载导航

    WinCE车载导航系统是我过去几年投入精力比较多的一个项目.我的主要工作内容是BSP的移植.硬件模块的调试和WinCE系统的深度定制.如TDA7415驱动.TDA7415均衡器.慧翰车载蓝牙模块.华为 ...

  9. java util 下的concurrent包

    ------------------------------------------java util 下的concurrent包--------并发包--------------------.jav ...

  10. [LeetCode] Perfect Rectangle 完美矩形

    Given N axis-aligned rectangles where N > 0, determine if they all together form an exact cover o ...