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. 字符串(后缀自动机):NOI 2016 优秀的拆分

    [问题描述] 如果一个字符串可以被拆分为 AABB 的形式,其中 A 和 B 是任意非空字符串, 则我们称该字符串的这种拆分是优秀的. 例如,对于字符串 aabaabaa,如果令 A = aab, B ...

  2. HDOJ(HDU) 2317 Nasty Hacks(比较、)

    Problem Description You are the CEO of Nasty Hacks Inc., a company that creates small pieces of mali ...

  3. GCD中有哪几种Queue?你自己建立过串行Queue吗?背后的线程模型是什么样的

    一共有五种,看图 Paste_Image.png 主线程也就是那个main,一般后台处理数据就就用default那个.创建过一个queue,处理NSMutableArray的时候都在在这一个queue ...

  4. [置顶] ruby变量详解(收集+整理)

    ruby的变量有局部变量,全局变量,实例变量,类变量,常量. 1.局部变量 局部变量以一个小写字母开头或下划线开头 局部变量有局部作用域限制(比如一个block内),它的作用域起始于声明处,结束于该声 ...

  5. python-从redis数据库中读数据

    读string,list,set,sort_set,hash类型的数据 import redis class DataBase: def __init__(self, host, port): sel ...

  6. 关闭ES动态创建mapping

    使用ES的默认配置会使我们在索引不存在于mapping中的字段时,会自动创建. 这无疑会给我们带来困扰. 在我们不想要某个字段被搜索的时候,我们可以在开始关闭动态创建mapping. 执行如下操作: ...

  7. Mysql学生管理系统:表的建立,外键一对多,多对多关系,中间关联表的建立

    学生管理系统 管理员注册/登录/注销 注册班级(班级详细信息) 注册学生信息 查看班级信息/查看老师资料 教师注册/注销  查看教师资料  查看学生资料  根据名称/班级/ 查看学生详细信息--支持模 ...

  8. Java日期相关操作

    1.获得日期 在旧版本 JDK 的时代,有不少代码中日期取值利用了 java.util.Date 类,但是由于 Date 类不便于实现国际化,其实从 JDK1.1 开始,就更推荐使用 java.uti ...

  9. validate方法配置项

    validate()方法配置项 submitHandler 通过验证后运行的函数,可以加上表单提交的方法 invalidHandler 无效表单提交后运行的函数 ignore 对某些元素不进行验证 r ...

  10. Java EE 7 / JAX-RS 2.0: Simple REST API Authentication & Authorization with Custom HTTP Header--reference

    REST has made a lot of conveniences when it comes to implementing web services with the already avai ...