来源于《HTML5高级程序设计》

css3
圆角 border-radius
旋转变换 transform:rotate();

变换 transformation
动画 animation
过度 transition

------------
html5 语义化

audio video canvas iframe h1 group button textarea
短语 mark kbd sub sup
article aside title

新片段元素
header footer

section web页面中的一块区域
article 独立的文件内容
aside 相关内容或引文
nav

canvas规范

浏览器变换,旋转,平移位置
context.save();//保持当前绘图的状态
context.translate(130,250);

context.restore();// 恢复原有的绘图状态

context.strokeStyle ="#663300";//边框夜色
context.fillStyle = "#339900";//填充颜色

context.fillRect() //填充矩形区域

渐变 看做是颜色沿着一条线进行缓慢的变化。

步骤; 1、创建渐变对象2、为渐变对象设置颜色,指明过度方式 3、在context上填充样式
渐变对象使用addColorStop() 设置颜色和偏移量

canvas 最有用的特性之一是允许开发人员直接访问canvas底层像素数据。
context.getImageData(sx,sy,sw,sh);
在调用这个函数的时候,如果canvas中的图像来自其他域,就会抛出安全异常。

object标签

HTML5笔记学习(canvas)的更多相关文章

  1. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  2. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  3. 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

    HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...

  4. HTML5 例子学习 HT 图形组件

    HTML5 例子学习 HT 图形组件 HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心 ...

  5. HTML5笔记3——Web Storage和本地数据库

    上一篇:HTML5笔记2——HTML5音/视频标签详解 Web Storage概述 在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storag ...

  6. 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇

    http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...

  7. 数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇

    http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...

  8. 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇

    <数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...

  9. HTML5 CSS3学习

    HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍:   http://www.html5cn.com.cn/news/gdt/2 ...

随机推荐

  1. 17.Recflection_反射

    www.cnblogs.com/rollenholt/archive/2011/09/02/2163758.html

  2. MyBatis动态代理查询出错

     org.apache.ibatis.exceptions.PersistenceException: ### Error querying database.  Cause: org.apache. ...

  3. eclipse/IDEA使用maven

    下载,解压(无须安装),配置环境变量,命令行下mvn -v测试.https://www.cnblogs.com/luotaoyeah/p/3764533.html eclipse使用maven 为ec ...

  4. node.js---sails项目开发(1)

    1.安装Node.js和npm---这里就做介绍啦! 2.需要全局下安装Sails sudo npm install sails -g 3. 在本地创建一个文件夹 mkdir ~/lsg/sails ...

  5. NUnit.Framework的使用方法演示

    using NUnit.Framework; namespace CheckExcel { [TestFixture] public class TestExcelHelper { /// <s ...

  6. 转:.NET特性与反射

    .NET编译器的任务之一是为所有定义和引用的类型生产元数据描述.除了程序集中标准的元数据外,.NET平台允许程序员使用特性(attribute)把更多的元数据嵌入到程序集中.简而言之,特性就是用于类型 ...

  7. java 获取request参数集

    request里有两个方法 request.getParameterMap(); request.getParameterNames(); 我想用这两种方法获取. 1.用request.getPara ...

  8. Getting Started with Rails (1)

    按照官网http://guides.rubyonrails.org/getting_started.html上学习了一下例子.在过程中有很多刚开始没理解的地方,写下来. 首先,建立了一个resourc ...

  9. ubuntu下关于profile和bashrc中环境变量的理解

    (0) 写在前面 有些名词可能需要解释一下.(也可以先不看这一节,在后面看到有疑惑再上来看相关解释) $PS1和交互式运行(running interactively): 简单地来说,交互式运行就是在 ...

  10. javascript Date对象 之 获取时间

    javascript Date对象 --> 获取时间: 测试代码: <!DOCTYPE html> <html lang="en"> <head ...