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新属性的更多相关文章

  1. HTML5新属性在Google浏览器中不能显示的问题

    这两天在学习HTML5新属性时遇到了如下问题,很是不解: 例如在学习使用canvas时,需要绘制一个红色的原点,代码如下: <!DOCTYPE HTML> <html> < ...

  2. 使用css3新属性clip-path制作小图标

    一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...

  3. HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)

    因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...

  4. css3新属性@ text-shadow

    text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移 ...

  5. css3.0新属性效果在ie下的解决方案(兼容性)

    css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...

  6. 实现Square类,让其继承自Rectangle类,并在Square类增添新属性和方法,在2的基础上,在Square类中重写Rectangle类中的初始化和打印方法

    实现Square类,让其继承自Rectangle类,并在Square类增添新属性和方法,在2的基础上,在Square类中重写Rectangle类中的初始化和打印方法 #import <Found ...

  7. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  8. (二)给IE6-IE9中的input添加HTML5新属性-placeholder

    同样是最近遇到的一个小问题.因为IE9以下input是不支持placeholder属性的.在网上找到了解决方案,果断带走.正如鲁迅先生所说的‘拿来主义’:运用脑髓,放出眼光,自己来拿!感谢.借花献佛在 ...

  9. 利用css新属性appearance优化select下拉框

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. 一招解决IE7无法访问https网页

    很多人都遇到过这种情况: 自己的IE访问不了https的网页了,如果你百度的话,有人会告诉你注册一堆的dll文件,或者更改IE设置啦什么的.上午,我也遇到这个问题,这些方法都不管用.请教了高手,将方法 ...

  2. Unique Binary Search Trees——LeetCode

    Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...

  3. voronoi

  4. Ubuntu中Nginx的安装与配置

    原文地址:http://www.cnblogs.com/languoliang/archive/2013/04/01/nginx.html 1.Nginx介绍 Nginx是一个非常轻量级的HTTP服务 ...

  5. SRM 392(1-250pt)

    DIV1 250pt 题意:给两个各含有一个*号的字符串s1和s2,可以用一个任意字符串代替*号(注意是串,不是只能用单个字符代替,也可以为用空串代替),问能否将s1和s2变为相同的字符串.如果能输出 ...

  6. hdoj 2085 核反应堆【水】

    核反应堆 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  7. sql server常用查询

    最近在做一些练习,觉得数据的查询是一个很有意思的,在做的过程中一些好的查询方法也使自己感觉到数据库的强大,于是乎就会想到要把这些方法记下来,以后就懒得再去想了 1.查询是整百的倍数 SELECT 实缴 ...

  8. Linux(SLES)挂载NTFS移动硬盘实践

    问题描写叙述: 因为通过測试环境导出的dmp过大,但要求尽快导入至生产server,请网络室打通防火墙后发现測试网络为100M而生产网络贵为1000M却无法发挥不论什么作用即使通过networklin ...

  9. Python学习之四【变量】

    变量:用于引用(绑定)对象的标识符 语法: >>变量名=对象 (数值,表达式等) 如计算圆的面积 PI=3.14 redius:12.3 area=PI*radius**2(**在pyth ...

  10. lnux内核的malloc实现(Oracle的cache buffer影子)

    lnux内核的malloc实现(Oracle的cache buffer影子) 本文原创为freas_1990,转载请标明出处:http://blog.csdn.net/freas_1990/artic ...