[HTML5 Canvas学习] 基础知识
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学习] 基础知识的更多相关文章
- HTML5 Canvas(基础知识)
最近笔者在学习HTML5的新元素<canvas>,会分享一些基础知识以及小例子,最终使用<canvas>实现一个绘制简单图表(条形图.线图或者饼图)的js库,会更新一到两篇文章 ...
- Matrix学习——基础知识
以前在线性代数中学习了矩阵,对矩阵的基本运算有一些了解,前段时间在使用GDI+的时候再次学习如何使用矩阵来变化图像,看了之后在这里总结说明. 首先大家看看下面这个3 x 3的矩阵,这个矩阵被分割成4部 ...
- HTML5 CANVAS制图 基础总结
一.基本绘图 首先,定义2D渲染变量ct(这里用了Jquery库): var ct = $(#canvasId).get(0).getContext('2d'); 以下是绘制各种基本图形的方法: // ...
- JAVA学习基础知识总结(原创)
(未经博主允许,禁止转载!) 一.基础知识:1.JVM.JRE和JDK的区别: JVM(Java Virtual Machine):java虚拟机,用于保证java的跨平台的特性. java语言是跨平 ...
- ansible学习基础知识和模块(一)
基础知识补充: 常用自动化运维工具 Ansible:使用python来开发的,无需设置Agentless(代理),一般管理几百台.与ssh的方式也不一样,ssh是基于c/s模式(客户端+服务器)来使用 ...
- Python学习-基础知识-2
目录 Python基础知识2 一.二进制 二.文字编码-基础 为什么要有文字编码? 有哪些编码格式? 如何解决不同国家不兼容的编码格式? unicode编码格式的缺点 如何既能全球通用还可以规避uni ...
- IOS科研IOS开发笔记学习基础知识
这篇文章是我的IOS学习笔记,他们是知识的基础,在这里,根据记录的查询后的条款. 1,UIScrollView能完毕滚动的功能. 示比例如以下: UIScrollView *tableScrollVi ...
- MySQL学习基础知识1
什么是数据库? 数据库就是存储数据的仓库. 存储方式: 变量 无法永久存储 文件处理,可以永久存储,弊端:文件只能在自己的计算机读写,无法被分享(局域网除外) 数据库分类: 1.关系型数据库 提供某种 ...
- HTML5 canvas 学习
一.canvas简介 <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是 ...
随机推荐
- delphi NativeXml的中文支持 乱码
一般XML的编码格式设置成UTF8比较通用,下面演示使用UTF8编码方式存储和处理包含中文的XML字符串(文件).1.设置启用内置的widestring支持 NativeXml内部使用ANSI str ...
- Jump Game —— LeetCode
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...
- HDOJ(HDU) 2115 I Love This Game(排序排序、、、)
Problem Description Do you like playing basketball ? If you are , you may know the NBA Skills Challe ...
- SCU 4440 Rectangle 2015年四川省赛题
题目链接:http://acm.scu.edu.cn/soj/problem/4440/ 题目大意:给一个n*m的方格,求周长小于等于k的矩形有多少个. 解题思路:我之前直接暴力,显然超时,所以后来发 ...
- Vagrant虚拟机的配置管理
Vagrant虚拟机的配置管理 一.shell配置管理 二.使用Puppet进行配置管理 三.案例 Apache服务器的自动配置 3.1 shell配置管理 3.2 puppet配置管理 ps:由于最 ...
- Codeforces Round #260 (Div. 1) --B. A Lot of Games (Trie)
B. A Lot of Games Andrew, Fedor and Alex are inventive guys. Now they invent the game with strings f ...
- eucalyptus的网络模式
总共有四种网络模式,默认采用的是system模式 SYSTEM Mode 最简单的网络配置.Eucalyptus分配mac地址,使用 Xen Bridge,配合已有的 DHCP DHCP 來分配 IP ...
- Jenkins 四: 启动关闭以及重启jenkins
启动 1. 在桌面新建一个jenkins.bat文件.内容如下: cd /d %JENKINS_HOME% java -jar %JENKINS_HOME%\jenkins.war --httpPor ...
- 带你一分钟理解 JavaScript 闭包
什么是闭包? 先看一段代码: function a(){ var n = 0; function inc() { n++; console.log(n); } inc(); inc(); } a(); ...
- Java中的 修饰符
java中的修饰符分为类修饰符,字段修饰符,方法修饰符. 根据功能的不同,主要分为以下几种. 1.权限访问修饰符 访问权限的控制常被称为具体实现的隐藏 把数据和方法包进类中,以及具体实现的隐藏,常共 ...