HTML5 canvas元素通过脚本语言(通常是Javascript) 绘制图形, 它仅仅是一个绘图环境,需要通过getContext('2d')方法获得绘图环境对象,使用绘图环境对象在canvas元素上进行绘制。

  getContext('2d')获得的对象时CanvasRenderingContext2D对象,它所包含的属性如下:

属性 简介
canvas 指向该绘图环境所属的canvas对象。该属性最常见的用途是通过它来获取canvas的宽度和高度,分别调用context.canvas.width 和context.canvas.height即可。
fillstyle 指定该绘图环境在后续的图形填充操作中所使用的颜色、渐变色或图案。 
font 设定在调用绘图环境对象的fillText()或strokeText()方法时,所使用的字形。
globalAlpha 全局透明度设定,它可以取0 ~ 1.0之间的值。浏览器会将每一个像素的alpha值与该值相乘,在绘制图像时也是如此。
globalCompsiteOperation 该值决定了浏览器将某个物体绘制在其他物体之上时,所采用的绘制方式。
lineCap 该值告诉浏览器如何绘制线段的端点,可以在以下三个值中指定一个:butt、round及square。默认值是butt
lineWidth 该值决定了在canvas之中绘制线段的屏幕像素宽度。它必须是一个非负、非无穷的double值。默认值是1.0
lineJoin 告诉浏览器在两条线段相交时如何绘制焦点。可取的值是:bevel、round、miter。默认值是miter
miterLimit 告诉浏览器如何绘制miter形式的线段焦点。
shadowBlur 该值决定了浏览器如何延伸阴影效果。值越高,阴影效果延伸得就越远。该值不是指阴影的像素长度,而是代表高斯模糊方程式中的参数值。
shadowColor 该值告诉浏览器使用何种颜色来绘制阴影。通常采用半透明作为该属性的值,以便让后面的背景能显示出来。
shadowOffsetX 以像素为单位,指定了阴影效果的水平方向偏移量。
shadowOffsetY 以像素为单位,指定了阴影效果的垂直方向偏移量。
strokeStyle 指定了对路径进行描边时所用的绘制风格。该值可被设定为某个颜色、渐变色或图案。
textAlign 决定了以fillText()或strokeText()方法进行绘制时,所画文本的水平对齐方式。
textBaseline 决定了以fillText()或strokeText()方法进行绘制时,所画文本的垂直对齐方式。

  包含方法如下:

save()

将当前canvas的状态推送到一个保存canvas状态的堆栈顶部。canvas状态包括了当前的坐标变换(transformation)信息、剪辑区域(cliping region)以及所有canvas绘图环境对象的属性。

包括了strokeStyle、fillStyle与globalCompositeOperation等

restore() 将canvas状态堆栈顶部的条目弹出。原来保存于栈顶的那一组状态,在弹出之后,就被设置成canvas当前的状态了。

clearRect(double x, double y, double w, double h)

将指定矩形与当前剪辑区域相交范围内的所有像素清除。

strokeRect(double x, double y, double w, double h)

使用如下属性,为指定的矩形描边:

strokeStyle、lineWidth、lineJoin、miterLimit

fillRect(double x, double y, double w, double h) 使用fillStyle属性填充指定的矩形。
CanvasGradient createLinearGradient(double x0, double y0, double x1, double y1) 创建线性渐变
CanvasGradient createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1) 创建放射渐变
arc() 在当前路径中增加一段表示圆弧或圆形的子路径。可以通过一个boolean参数来控制该段子路径的方向。如果此参数是true, 那么arc()所创建的子路径就是逆时针,否则是顺时针。
beginPath() 将当前路径之中的所有子路径都清除掉,以此来重置当前路径。
closePath() 显式地封闭某段开放路径。
fill() 使用fillStyle对当前路径的内部进行填充。
rect(double x, double y, double w, double h) 在坐标(x, y)处建立一个宽度为w, 高度为h的矩形子路径。该子路径一定是封闭的,而且总是按顺时针方向来创建的。
stroke() 使用strokeStyle来描绘当前路径的轮廓线。
moveTo(x, y) 向当前路径中增加一条子路径,该子路径只包含一个点,就是由参数传入的那个点。该方法并不会从当前路径中清除任何子路径。
lineTo(x, y) 如果当前路径中没有子路径,那么这个方法的行为与moveTo()方法一样。如果当前路径中存在子路径,那么该方法会将你所指定的那个点加入路径中。
quadraticCurveTo(double cpx, double cpy, double x, double y) 创建一条表示二次方贝赛尔曲线的路径。该方法需要传入两个点,第一个是曲线的控制点,第二个点是锚点。
bezierCurveTo(double cpx, double cpy, double cp2x, double cp2y, double x, double y) 创建一条代表三次方贝赛尔曲线的路径。该方法传入三个点的坐标,前两点是该曲线的控制点,最后一个点是锚点。

[HTML5 Canvas学习] 基础知识的更多相关文章

  1. HTML5 Canvas(基础知识)

    最近笔者在学习HTML5的新元素<canvas>,会分享一些基础知识以及小例子,最终使用<canvas>实现一个绘制简单图表(条形图.线图或者饼图)的js库,会更新一到两篇文章 ...

  2. Matrix学习——基础知识

    以前在线性代数中学习了矩阵,对矩阵的基本运算有一些了解,前段时间在使用GDI+的时候再次学习如何使用矩阵来变化图像,看了之后在这里总结说明. 首先大家看看下面这个3 x 3的矩阵,这个矩阵被分割成4部 ...

  3. HTML5 CANVAS制图 基础总结

    一.基本绘图 首先,定义2D渲染变量ct(这里用了Jquery库): var ct = $(#canvasId).get(0).getContext('2d'); 以下是绘制各种基本图形的方法: // ...

  4. JAVA学习基础知识总结(原创)

    (未经博主允许,禁止转载!) 一.基础知识:1.JVM.JRE和JDK的区别: JVM(Java Virtual Machine):java虚拟机,用于保证java的跨平台的特性. java语言是跨平 ...

  5. ansible学习基础知识和模块(一)

    基础知识补充: 常用自动化运维工具 Ansible:使用python来开发的,无需设置Agentless(代理),一般管理几百台.与ssh的方式也不一样,ssh是基于c/s模式(客户端+服务器)来使用 ...

  6. Python学习-基础知识-2

    目录 Python基础知识2 一.二进制 二.文字编码-基础 为什么要有文字编码? 有哪些编码格式? 如何解决不同国家不兼容的编码格式? unicode编码格式的缺点 如何既能全球通用还可以规避uni ...

  7. IOS科研IOS开发笔记学习基础知识

    这篇文章是我的IOS学习笔记,他们是知识的基础,在这里,根据记录的查询后的条款. 1,UIScrollView能完毕滚动的功能. 示比例如以下: UIScrollView *tableScrollVi ...

  8. MySQL学习基础知识1

    什么是数据库? 数据库就是存储数据的仓库. 存储方式: 变量 无法永久存储 文件处理,可以永久存储,弊端:文件只能在自己的计算机读写,无法被分享(局域网除外) 数据库分类: 1.关系型数据库 提供某种 ...

  9. HTML5 canvas 学习

    一.canvas简介 ​ <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是 ...

随机推荐

  1. 数据结构(堆):SCOI 2009 生日礼物

    Description 小西有一条很长的彩带,彩带上挂着各式各样的彩珠.已知彩 珠有N个,分为K种.简单的说,可以将彩带考虑为x轴,每一个彩珠有一个对应的坐标(即位置).某些坐标上可以没有彩珠,但多个 ...

  2. 安装ucenter 步骤详解及supesite 安装详解

    最近弄一个 php 的cms  ,花了周六日时间研究了一下,这里记录一下,首先在网页上下载ucenter(分为 gbk 或者utf8版本) 首先下载ucenter 之后,解压之后,upload  里的 ...

  3. SQL 2005远程连接是出错(provider: SQL 网络接口, error: 28 - 服务器不支持请求的协议

    SQL 2005远程连接是出错(provider: SQL 网络接口, error: 28 - 服务器不支持请求的协议 sql远程连接服务器网络sql serversqlserver 解决方法:在服务 ...

  4. VSTS负载测试——如何:使用 SQL 创建结果存储区

    原文地址:http://www.cnblogs.com/chenxizhang/archive/2009/06/01/1493939.html 原文参见:http://msdn.microsoft.c ...

  5. bzoj 1055 [HAOI2008]玩具取名(区间DP)

    1055: [HAOI2008]玩具取名 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1258  Solved: 729[Submit][Statu ...

  6. Using Apache Web Server with Jboss AS 7

    In real-world projects, it's common to find Apache web server as a front door to your application se ...

  7. wordpress 404 error on all pages!

    You have to enable mod_rewrite in apache itself or you won't be able to have permalinks the way you ...

  8. 《University Calculus》-chape4-导数的应用-洛必达法则

    在求解极限的时候,我们常会遇到0/0型的不定式而无法进一步的求解极限,而洛必达法则就是用于处理这样的特定情况. 洛必达法则: 其证明过程要基于柯西中值定理(在该专栏的微分中值定理中给出). 证明:

  9. 《A First Course in Probability》-chaper5-连续型随机变量-正态分布

    古典统计学问题一开始起源于赌博,让我们看这样一道有关赌博的问题. Q:A.B两人进行n局赌博,A胜的概率是p,现在设置随机变量X表示A赢的局数,当X>np,A给赌场X-np元,否则B给赌场np- ...

  10. ubuntu server 14.04 vncserver with gnome

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvkAAAGdCAIAAAAHU/v+AAAgAElEQVR4nO3dv4skR5738fsX8g+Zf0