Canvas 属性,方法
context . restore() //弹出堆最上面保存的绘图状态
context . save() //在绘图状态堆上保存当前绘图状态
绘图状态可以看作当前画面应用的所有样式和变形的一个快照。而状态的应用则可以避免绘图代码的过度膨胀。
转换(Transformations)
context . rotate(angle) //按给定的弧度旋转,按顺时针旋转
context . scale(x, y) //按给定的缩放倍率缩放,1.0,为不变
context . setTransform(m11, m12, m21, m22, dx, dy)//重设当前的转换到
context . transform(m11, m12, m21, m22, dx, dy) //矩阵变换,结果等于当前的变形矩阵乘上
context . translate(x, y) //可以理解为偏移,向 x,y方向偏移指定的量,其用来移动 Canvas 的原点到一个指定的值
合成(Compositing)
context . globalAlpha [ = value ] //0-1.0之间的数据,设定图像的透明度
context . globalCompositeOperation [ = value ] //设定重叠图像的覆盖方式,可以设定为(注,值大小写敏感):
颜色和风格
context . fillStyle [ = value ] //返回填充形状的当前风格,能被设置以用来改变当前的填充风格,其值可以是CSS颜色字串,也可以是CanvasGradient或者 CanvasPattern 对象,非法的值将被忽略。
context . strokeStyle [ = value ] //返回当前描绘形状的风格,能被设置,其值同上。
gradient . addColorStop(offset, color) //在给定偏移的地方增加一个渐变颜色点,偏移量取值范围为 0-1.0 之间,否则产生一个 INDEX_SIZE_ERR的异常,color 为 DOM 字符串,如果不能解析,则抛出一个 SYNTAX_ERR的异常
gradient = context . createLinearGradient(x0, y0, x1, y1) //建立一个线性渐变,如果任何一个参数不是有限值,则抛出一个NOT_SUPPORTED_ERR的异常。
gradient = context . createRadialGradient(x0, y0, r0, x1, y1, r1) //建立一个径向渐变,如果任何一个参数不是有限值,则抛出一个NOT_SUPPORTED_ERR的异常。假如 r0或 r1 为负值,则抛出 INDEX_SIZE_ERR的异常。
pattern = context . createPattern(image, repetition)
本方法用指定的图像和重复方向建立一个画布图案对象,image 参数可为 img,canvas,video 元素中的任一个,如果不满足此条件,则抛出TYPE_MISMATCH_ERR 异常,如果图片编码未知或没有图像数据,则抛出INVALID_STATE_ERR 异常;
第二个参数可以是下列值:
repeat 默认参数,如果为空,则为此参数,表示两个方向重复
repeat-x 仅水平重复
repeat-y 仅垂直重复
no-repeat 不重复
canvas的状态
每个上下文都包含一个绘图状态的堆,绘图状态包含下列内容:
$ 当前的 transformation matrix.
$ 当前的 clipping region
$ 当前的属性值:fillStyle, font, globalAlpha,
globalCompositeOperation, lineCap, lineJoin,
lineWidth, miterLimit, shadowBlur, shadowColor,
shadowOffsetX, shadowOffsetY, strokeStyle, textAlign,
textBaseline
注:当前 path 和当前 bitmap 不是绘图状态的一部分,当前 path 是持久
存在的,仅能被 beginPath()复位,当前 bitmap 是 canvas 的属性,而非绘
图上下文。
Canvas 属性,方法的更多相关文章
- flutter自定义View(CustomPainter) 之 canvas的方法总结
画布canvas 画布是一个矩形区域,我们可以控制其每一像素来绘制我们想要的内容 canvas 拥有多种绘制点.线.路径.矩形.圆形.以及添加图像的方法,结合这些方法我们可以绘制出千变万化的画面. 虽 ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- python7 静态方法、类方法、属性方法 ;反射;异常处理
#-*- coding:utf8 -*- # 静态方法@staticmethod # 静态方法(当eat变成静态方法后,再通过实例调用时就不会自动把实例本身当作一个参数传给self了.) clas ...
- Delphi中TStringList类常用属性方法详解
TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. 常规的用法大家都知道,现在来讨论它的一些高级的用法. 先把要讨论的几个属性列出来: 1.CommaText 2.Delim ...
- React-Native的基本控件属性方法
对React-Native的学习,从熟悉基本控件开始. View 属性方法 序号 名称 属性Or方法 类型 说明 1 accessibilityLabel 属性 string 2 accessib ...
- 常用元素的属性/方法 attr / val / html /text
常用元素的属性/方法 得到一个元素的高度, $("#myid").height() 得到一个元素的位置, $("#myid").offset() 返回的是一个o ...
- HTML5 canvas translate() 方法
HTML5 canvas translate() 方法 translate() 方法重新映射画布上的 (0,0) 位置.
- List的方法和属性 方法或属性 作用
List的方法和属性 方法或属性 作用 Capacity 用于获取或设置List可容纳元素的数量.当数量超过容量时,这个值会自动增长.您可以设置这个值以减少容量,也可以调用trin()方法来减少容量以 ...
- iOS对UIViewController生命周期和属性方法的解析
目录[-] iOS对UIViewController生命周期和属性方法的解析 一.引言 二.UIViewController的生命周期 三.从storyBoard加载UIViewController实 ...
随机推荐
- MySQL中的SQL语言
从功能上划分,SQL 语言可以分为DDL,DML和DCL三大类.1. DDL(Data Definition Language)数据定义语言,用于定义和管理 SQL 数据库中的所有对象的语言 :CRE ...
- filter应用案例一:分IP统计访问次数
统计工作需要在所有资源之前都执行,那么就可以放到Filter中了.用Map<String,Integer>装载统计的数据.Map创建时间(使用ServletContextListener, ...
- Problem list
不定时更新,发现好题目但是没时间写的就添加,写完就删除. hdu5732 求树的重心 poj1741
- JS实现类似网页的测试考卷
js实现table中获取不同td的值,并且md5加密,匹配md5的值(避免通过查看网页源代码可以看到正确答案),再用js前端判断输入与正确的值是否相同.最后再把错误的单词计数,并且输出,后端加入对应错 ...
- 【SAP BO】【DI】DataService 服务无法启动。错误1069:由于登录失败而无法启动服务
重启BI服务器后,突然发现DataServices服务无法启动,提示: 错误 1069:由于登录失败而无法启动服务. 解决方法: (1)打开控制面板--> 服务 --> 右键点击Data ...
- 最近发现docker感觉不错
最近发现docker感觉不错,接下来开始学习docker方面的技术.lxc也可以学学. storm,kafka也要熟悉起来.
- hbase 问题记录
hbase regionserver挂掉~ org.apache.hadoop.ipc.RemoteException(org.apache.hadoop.hdfs.server.namenode.L ...
- HDU 3090 (贪心)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3090 题目大意:一共n段路.每段路每千米都会被抢劫一定数量,可以雇佣武士护卫m千米.问最少被抢劫数量 ...
- HDU 1576 (乘法逆元)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1576 题目大意:求(A/B)mod 9973.但是给出的A是mod形式n,n=A%9973. 解题思 ...
- 安装lua_zlib让OpenResy可以接收gzip请求
1.下载和安装lua_zlib wget https://github.com/brimworks/lua-zlib/archive/master.zip unzip master.zip cd lu ...