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. 快速傅里叶变换(FFT):COGS 2216. 你猜是不是KMP

    2216. 你猜是不是KMP ★★★☆   输入文件:guess.in   输出文件:guess.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述] XX在玩两个串的游戏. ...

  2. 数据结构(左偏树,可并堆):BNUOJ 3943 Safe Travel

    Safe Travel Time Limit: 3000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Java class ...

  3. 调用系统api修改系统时间

    一:截图 二:代码 using System; using System.Collections.Generic; using System.ComponentModel; using System. ...

  4. 解决 SQL Server 耗尽内存的情况

       如果您碰到SQL Server服务造成内存不断扩展最终系统死机等情况,请按照以下方法解决. 原理:SQL Server 2000引入的动态内存分配机制,一般不能很好的回收内存,如果计算机一直不关 ...

  5. 结构性产品 Structured Product

    定义 结构性产品是固定收益产品(Fixed Income Instruments)的一个特殊种类.它将固定收益产品(通常是定息债券)与金融衍生交易(如远期.期权.掉期等)合二为一,增强产品收益或将投资 ...

  6. AE 3D摄像机工作原理

    看了AE教程的3D可视化音频和序列法导入三维模型之后对于视频解析3D是有了更深的认识.很感谢AE在CS6之后加入了3D摄像机跟踪器的功能.它是通过摄像机跟踪反求来得到影片中的平面特征点.然后由用户指定 ...

  7. Java里的IO流里的FileInputStream 的读取并在前打印行数!

    大家好!!新人求罩! import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException ...

  8. mysql 加入�列,改动列,删除列。

    MySQL 加入�列,改动列,删除列 ALTER TABLE:加入�,改动,删除表的列,约束等表的定义. 查看列:desc 表名; 改动表名:alter table t_book rename to ...

  9. poj2239 Selecting Courses --- 二分图最大匹配

    匈牙利算法模板题 有n门课程,每门课程可能有不同一时候间,不同一时候间的课程等价. 问不冲突的情况下最多能选多少门课. 建立二分图,一边顶点表示不同课程,还有一边表示课程的时间(hash一下). #i ...

  10. PHP简单利用token防止表单重复提交(转)

    <?php/* * PHP简单利用token防止表单重复提交 */function set_token() { $_SESSION['token'] = md5(microtime(true)) ...