* Canvas(画布)
* 基本内容
* 简单来说,HTML5提供的新元素<canvas>
* Canvas在HTML页面提供画布的功能
* 在画布中绘制各种图形
* Canvas绘制的图形与HTML页面无关
* 无法通过DOM获取绘制的图形
* 无法为绘制的图形绑定DOM事件
* 只能使用Canvas提供的API
* Canvas用途
* 在HTML页面中绘制图表(例如柱状图、饼状图等)
* 网页游戏 - Flash技术
* 使用HTML5中的Canvas
* 如何使用Canvas
* 在HTML页面中定义<canvas>元素
* 在javascript代码中
* 获取<canvas>元素
* 创建画布对象
* getContext('2d')方法
* 使用Canvas提供的API
* 绘制图形
* 绘制矩形
* fillRect(x,y,width,height) - 实心矩形
* x和y - 矩形的左上角坐标值
* width - 设置矩形的宽度
* height - 设置彗星的高度
* strokeRect(x,y,width,height) - 空心矩形
* clearRect(x,y,width,height)
* 清除指定区域的矩形
* 设置颜色
* fillStyle - 设置填充颜色
* strokeStyle - 设置描边颜色
* globalAlpha - 设置透明度(0-1)
* 设置渐变
* 线型渐变 - createLinearGradient(x1,y1,x2,y2)
* 具有基准线 - 起点(x1,y1)和终点(x2,y2)
* 扇形(射线)渐变 - createRadialGradient(x1,y1,r1,x2,y2,r2)
* 具有柱形(锥形) - 两个圆的面积
* 参数
* x1和y1 - 第一个圆的圆心坐标值
* r1 - 第一个圆的半径
* x2和y2 - 第二个圆的圆心坐标值
* r2 - 第二个圆的半径

HTML5中的canvas基本概念及绘图的更多相关文章

  1. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  2. HTML5中的Canvas详解

    什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...

  3. HTML5 中的 canvas 画布（一）

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

  4. HTML5中的 Canvas

    什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...

  5. HTML5 中的 canvas 画布（二）

    绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image();  // 先创建图片对象 image.src = '图片的 ...

  6. HTML5中的Canvas和SVG

    Canvas 和 SVG 都允许我们在浏览器中创建图形,但是它们在根本上是不同的. 1 SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中 ...

  7. HTML5中的Canvas

    1.Canvas标签的宽高一定要设置在标签上或者采用js添加属性,如果用css去设置的话,会把画布被拉伸,相当于将默认的画布拉伸到指定位置.默认为300px*100px; <canvas wid ...

  8. [Selenium] 操作 HTML5 中的 Canvas 绘制图形

    测试 http://literallycanvas.com/ 以 Chrome Driver 为例阐述,通过 Actions 在 Canvas 上绘制一个封闭图形.对于 Canvas 上的操作,推荐 ...

  9. HTML5中的Canvas精品教程

    http://javascript.ruanyifeng.com/htmlapi/canvas.html

随机推荐

  1. mac word 快捷键

      https://support.office.com/en-us/article/Word-keyboard-shortcuts-c0ca851f-3d58-4ce0-9867-799df7366 ...

  2. c++ 职责链模式（Chain of Responsibility）

    职 责链模式:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处 理它为止.其思想很简单,考虑员工要求加薪.公司的管 ...

  3. mac 进程管理

    1.前言 启用goagent.firefly等服务的时候,如果非正常退出,再次启动经常会遇到address already in use,端口被先前启动的服务进程所占用,导致服务无法使用.这种情况,可 ...

  4. Subgradient Algorithm

    Subgradient是一种可以优化不可微的凸函数的方法. 首先回顾凸函数的定义: $f(y) \geq f(x) + \nabla f(x)^T(y-x), all \hspace{2 pt} x, ...

  5. URAL 1549 Another Japanese Puzzle（构造）

    题目大意 构造一条闭合路线,使得路线不能相交,并且走直线的步数小于等于 S,转弯(左转和右转)的步数小于等于 T.(0≤S,T≤1000) 求一条最长的路线 做法分析 注意到,因为要求路线闭合,那么转 ...

  6. 【转载】linux内核启动android文件系统过程分析

    主要介绍linux 内核启动过程以及挂载android 根文件系统的过程,以及介绍android 源代码中文件系统部分的浅析. 主要源代码目录介绍Makefile (全局的Makefile)bioni ...

  7. Bill Gates说..

    世界不会在意你的自尊,人们看的只是你的成就.在你没有成就以前,切勿过分强调自尊.

  8. 装B必备词汇

    这个页面用来记录遇到的所有高大上的词汇,本词汇集仅限于装B圈交流和讨论. 一致性 hash 算法(consistent hashing) http://blog.csdn.net/sparkliang ...

  9. NSNotification Name 最佳写法

    本文主要借探讨NSNotificationName的最佳写法的机会,学习下extern, static, const, #define 和常量指针与指针常量等的特性和用法. 1.NSNotificat ...

  10. C#调用Java类

    C#调用Java类 (2011-01-07 14:02:05) 转载▼   分类: Java学习  1. 在Eclipse中新建名称为hello的java project,此工程仅包含一个文件hell ...