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. 转:给C++初学者的50个忠告

                                                           转:给C++初学者的50个忠告 1.把C++当成一门新的语言学习(和C没啥关系!真的.): ...

  2. expresscalculate

    //本程序接受任意含有+.-.*./和()的数值表达式,数值允许带小数,输入以#结束.如:((2.4+3.5)*2-(2+3.5)/2)*(2+3)# #include <stdio.h> ...

  3. Threading Module源码概述(一)

    Python的Threading模块是建立在thread module基础上的一个模块,在threading模块中,暴露着许多thread模块的属性.比如threading._get_ident实际上 ...

  4. 在pcDuino上刷了AndDroid,Ubuntu,XBMC

    一.Android.Ubuntu.XBMC播放高清视频得比较 1.Andrioid上播放1080P 无压力,硬件解码 2.Ubuntu上用Mplayer播放视频会很卡,可能是没有硬解的原因 3.Ubu ...

  5. servelt乱码问题(tomcat服务端编码为ISO-8859-1)

    Post的编码决定机制: <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...

  6. linux Tomcat restart脚本简单版

    linux系统下重启tomcat的shell脚本: tomcat_home=/opt/apache-tomcat-6.0.32  #找到tomcat进程的id并kill掉 ps -ef |grep t ...

  7. [Rails Level 2] Ground up

    1. Rails commends line: Example: rails new blog --skip-test-unit --database=postgresql

  8. Android开发艺术探索》读书笔记 (5) 第5章 理解RemoteViews

    第5章 理解RemoteViews 5.1 RemoteViews的应用 (1)RemoteViews表示的是一个view结构,它可以在其他进程中显示.由于它在其他进程中显示,为了能够更新它的界面,R ...

  9. RuntimePermissions

    This sample shows runtime permissions available in Android M and above. Display the log on screen to ...

  10. warning:1071 (42000) Specified key was too long;max key length is 1000 bytes

    原因是mysql字段长度设置的太长了, 从而导致mysql在建立索引时,索引长度超过了mysql默认许可的长度 默认 Innodb 允许长度为 767 MyISAM 允许长度为 1000 官方说明 如 ...