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. 网络编程-pcap数据包格式

    Libpcap的官方网站是http://www.tcpdump.org/,该项目和Tcpdump项目是同一个团队维护.Libpcap是一个平台独立的 数据包捕获开发包,制定了数据包离线存储的事实标准. ...

  2. (转载)MySQL中执行sql语句反斜杠需要进行转义否则会被吃掉

    (转载)http://www.phpcode8.com/lamp/mysql-lamp/mysql-escape-slash.html 最近在执行一个sql备份的还原后,发现系统的部分路径找不到,于是 ...

  3. 图论(对偶图):COGS 470. [NOI2010]海拔

    470. [NOI2010]海拔 ★★★☆   输入文件:altitude.in   输出文件:altitude.out   简单对比 时间限制:2 s   内存限制:512 MB 海拔 [问题描述] ...

  4. vtk 中文显示

    参考文章: http://www.vislab.cn/bbs/viewthread.php?tid=5079&page=1&extra=#pid19477 http://tieba.b ...

  5. Eclipse集成环境中Android SDK下载及更新失败解决方案

    由于公司新项目比较忙,有好长一段时间没碰Android开发咯! 近期闲来在网上下了个开源的应用想拿来自己学习下其中的源码及整体设计,当我把下下来的项目导入Eclipse中时,报如下警告: 原因是我本地 ...

  6. web前端开发中Nodejs、Grunt、npm等的介绍、使用

    一.Nodejs的安装: Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs,就去安装吧.去 https://nodejs.org/ 上,点击页面中那个绿色.大 ...

  7. webstorm配置react

    设置.js文件默认以jsx的语法打开 在没有进行设置的情况下,每次打开WebStorm的时候打开包含jsx语法的.js文件都会有以下提示: 当然我们点击转换后就可以了,但是每次都会提示,所以还是来一个 ...

  8. Failed dependencies: 检查依赖性错误 解决方法

    centOs下: error: Failed dependencies: 检查依赖性错误 解决方法 刚才安装avast的linux版,结果出现了: [root@localhost /]# rpm -i ...

  9. yii 验证码那点事儿

    今天要使用yii验证码, 不过, 这个验证码是整站通用的, 也就是说, 有个表单的提交是使用ajax方式来提交, 整站, 不管在哪个地方, 都能点出来此窗口, 来提交信息 关于yii验证码, fram ...

  10. josn 转php

    $data = josn_decode(data,[true]); 加true转化为php数组:不加为对象,使用:$data->'字段'.