* 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. apache+tomcat整合后的编码问题

    apache+tomcat整合提供webserver服务的方式是为了实现两个目的:一是方便利用apache http server将客户请求均衡的分给tomcat1,tomcat2....去处理,即负 ...

  2. CentOS下Tmux安装和使用

    Tmux介绍: Tmux是BSD实现的Screen替代品,相对于Screen,它更加先进:支持屏幕切分,而且具备丰富的命令行参数,使其可以灵活.动态的进行各种布局和操作.它可以做到一条命令就启动起来( ...

  3. AutoMapper用法一瞥

    前段时候做个小项目用到了autoMapper(参考了NOP里的用法),感觉还行,用起来挺方便的.首先复杂的东西我就不说了,至于详细的教程我也就不写了,比较园子里有很多这样的文章,我就分享下,在项目中实 ...

  4. Tips9: Destroy( )函数中的 延迟摧毁 功能

    你知道Object.Destroy()函数吗?在脚本中用来摧毁一个游戏物体或组件,可是你知道他能在执行后延迟一段时间后才摧毁物体吗,其实很简单: using UnityEngine; public c ...

  5. Win7以上 32/64位系统隐藏托盘图标

    前两天有朋友找我,让帮忙写个小工具,隐藏windows的托盘图标,想想最近在家也不想做太复杂的事,也好几年没写过windows上的小工具了,就答应了.想来挺简单的事,没想到还是有点小插曲的.特地来博客 ...

  6. awk分隔符设定为多个字符或字符串

    awk -F"[01]" '{}'  这种形式指定的分隔符是或的关系,即0或1作为分隔符:awk -F"[0][1]" '{}' 这种形式指定的分隔符是合并的关 ...

  7. 使用saripaar对android输入控件进行快速验证

    saripaar是个android的第三方快速校验,使用注解快速添加验证规则. public class LoginActivity extends Activity implements Valid ...

  8. [CLR via C#]11. 事件

    一. 设计要公开事件的类型 如果类型定义了事件成员,那么类型(或类型实例)就可以通知其他对象发生了一些特定的事情. 例如,Button类提供了一个名为Click的事件.应用程序中的一个或多个对象可能想 ...

  9. 怎样从C#中打开数据库并进行 增 删 改 查 操作

    首先 在C#中引用数据库的操作! (因为我们用的是SQLserver数据库,所以是SqlClient) using System.Data.SqlClient; 1:要实现对数据库的操作,我们必须先登 ...

  10. cURL和HTTPie

    http://lingxiankong.github.io/blog/2014/08/19/curl-httpie/ 前两天在网上看到一个号称比cURL更牛逼的命令行工具HTTPie,提供命令行交互方 ...