canvas新属性
lineCap默认值是butt,还有aquare,round
使用:context.lineCap="butt"
lineJoin
miter是默认
还可以是round,bevel
此处又会涉及到另一个属性,context.miterLimit
默认miterLimit是10,当超过10时,会以bevel的形式显现,那么什么是miterLimit呢?具体计算是有些复杂的,因为线是有宽度的,而miterllimit 指的是真正的顶端距离有宽度所产生的尖端点之间的距离值
下面介绍canvas图形绘制的图形变换
图形变换一般指translate,scale,rotate三种
//context.save();
context.fillStyle=green;
context.fillRect(0,0,200,200);
context.translate(100,100);
//context.restore();
context.fillStyle=red;
context.fillRect(0,0,200,200);
context.translate(200,200);
运行结果发现红色矩形位移了300,300,这时就需要使用context.save();context.restore()来保存和恢复状态
当然,canvas还有transform和setTransform属性,可以不使用translate,scale等,就可以达到效果,setTransform为了恢复改变形状之前的状态。
那么transform(1,0,0,1,100,100)和setTransform都有6个参数,这里涉及到了变幻矩阵,而这a,b,c,d,e,f 六个参数分别代表:水平缩放,水平倾斜,垂直倾斜,垂直缩放,水平平移,垂直平移
canvas新属性的更多相关文章
- HTML5新属性在Google浏览器中不能显示的问题
这两天在学习HTML5新属性时遇到了如下问题,很是不解: 例如在学习使用canvas时,需要绘制一个红色的原点,代码如下: <!DOCTYPE HTML> <html> < ...
- 使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
- HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)
因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...
- css3新属性@ text-shadow
text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移 ...
- css3.0新属性效果在ie下的解决方案(兼容性)
css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...
- 实现Square类,让其继承自Rectangle类,并在Square类增添新属性和方法,在2的基础上,在Square类中重写Rectangle类中的初始化和打印方法
实现Square类,让其继承自Rectangle类,并在Square类增添新属性和方法,在2的基础上,在Square类中重写Rectangle类中的初始化和打印方法 #import <Found ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- (二)给IE6-IE9中的input添加HTML5新属性-placeholder
同样是最近遇到的一个小问题.因为IE9以下input是不支持placeholder属性的.在网上找到了解决方案,果断带走.正如鲁迅先生所说的‘拿来主义’:运用脑髓,放出眼光,自己来拿!感谢.借花献佛在 ...
- 利用css新属性appearance优化select下拉框
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
随机推荐
- 快速傅里叶变换(FFT):COGS 2216. 你猜是不是KMP
2216. 你猜是不是KMP ★★★☆ 输入文件:guess.in 输出文件:guess.out 简单对比时间限制:1 s 内存限制:256 MB [题目描述] XX在玩两个串的游戏. ...
- 数据结构(左偏树,可并堆):BNUOJ 3943 Safe Travel
Safe Travel Time Limit: 3000ms Memory Limit: 65536KB 64-bit integer IO format: %lld Java class ...
- 调用系统api修改系统时间
一:截图 二:代码 using System; using System.Collections.Generic; using System.ComponentModel; using System. ...
- 解决 SQL Server 耗尽内存的情况
如果您碰到SQL Server服务造成内存不断扩展最终系统死机等情况,请按照以下方法解决. 原理:SQL Server 2000引入的动态内存分配机制,一般不能很好的回收内存,如果计算机一直不关 ...
- 结构性产品 Structured Product
定义 结构性产品是固定收益产品(Fixed Income Instruments)的一个特殊种类.它将固定收益产品(通常是定息债券)与金融衍生交易(如远期.期权.掉期等)合二为一,增强产品收益或将投资 ...
- AE 3D摄像机工作原理
看了AE教程的3D可视化音频和序列法导入三维模型之后对于视频解析3D是有了更深的认识.很感谢AE在CS6之后加入了3D摄像机跟踪器的功能.它是通过摄像机跟踪反求来得到影片中的平面特征点.然后由用户指定 ...
- Java里的IO流里的FileInputStream 的读取并在前打印行数!
大家好!!新人求罩! import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException ...
- mysql 加入�列,改动列,删除列。
MySQL 加入�列,改动列,删除列 ALTER TABLE:加入�,改动,删除表的列,约束等表的定义. 查看列:desc 表名; 改动表名:alter table t_book rename to ...
- poj2239 Selecting Courses --- 二分图最大匹配
匈牙利算法模板题 有n门课程,每门课程可能有不同一时候间,不同一时候间的课程等价. 问不冲突的情况下最多能选多少门课. 建立二分图,一边顶点表示不同课程,还有一边表示课程的时间(hash一下). #i ...
- PHP简单利用token防止表单重复提交(转)
<?php/* * PHP简单利用token防止表单重复提交 */function set_token() { $_SESSION['token'] = md5(microtime(true)) ...