* 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. Powerdesigner 16.5 从SQL Server 2012做逆向工程时提示：Unable to list tables问题

    公司深圳团队开发有一套系统在华北区这边推向客户,在一次更新补丁时,由于发生了数据字典的变更,但深圳团队并未给出数据库的更新脚本,只给了新版本的数据库创建脚本,为了保证客户方系统中已有数据不丢失,只能自 ...

  2. 超微 X9DRL-iF 服务器主板简介 BIOS相关图解

    超微 X9DRL-iF 服务器主板简介 BIOS相关图解 板载串口阵列相关简介 网烁信息805    发布时间:2012-6-15 21:10:09    浏览数:2745 随着Intel E5至强的 ...

  3. MFC下调用控制台和控制台下MFC库的支持

    1.MFC下调用控制台 在CWinApp的InitInstance中对话框的DoModal之前加入 AllocConsole(); // 开辟控制台 SetConsoleTitle(_T(" ...

  4. thinkphp 3.2.3+Admin LTE后台框架

  5. ASP.NET Web API 的简单示例

    Demo1: HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  6. Unity 坐标系

    Unity 使用的是左手坐标系

  7. windows下远程连接ubantu

    要实现windows下连接ubantu需要安装以下软件: 1. windows下安装winSCP 2. Ubantu下安装OpenSSH Server 可以使用命令行安装openSSH Server: ...

  8. c++中继承和java中继承的对比

    java中: class Parent{ public void test(int a){ System.out.println("Parent:" + a); System.ou ...

  9. 使用MyXls，出现访问被拒绝情况

    MyXls 作为一款比较好用的 操作Excel 的开源项目. 最近日常偶然发现报权限的问题,导出xls失败,处理方式以下: 如报上图所示错误,则需要在web.config中 <system.we ...

  10. bootstrap插件学习-bootstrap.typehead.js

    先看bootstrap.typehead.js的结构 var Typeahead = function ( element, options ){} //构造器 Typeahead.prototype ...