canvas新属性
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新属性的更多相关文章
- HTML5新属性在Google浏览器中不能显示的问题
这两天在学习HTML5新属性时遇到了如下问题,很是不解: 例如在学习使用canvas时,需要绘制一个红色的原点,代码如下: <!DOCTYPE HTML> <html> < ...
- 使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
- HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)
因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...
- css3新属性@ text-shadow
text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移 ...
- css3.0新属性效果在ie下的解决方案(兼容性)
css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...
- 实现Square类,让其继承自Rectangle类,并在Square类增添新属性和方法,在2的基础上,在Square类中重写Rectangle类中的初始化和打印方法
实现Square类,让其继承自Rectangle类,并在Square类增添新属性和方法,在2的基础上,在Square类中重写Rectangle类中的初始化和打印方法 #import <Found ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- (二)给IE6-IE9中的input添加HTML5新属性-placeholder
同样是最近遇到的一个小问题.因为IE9以下input是不支持placeholder属性的.在网上找到了解决方案,果断带走.正如鲁迅先生所说的‘拿来主义’:运用脑髓,放出眼光,自己来拿!感谢.借花献佛在 ...
- 利用css新属性appearance优化select下拉框
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
随机推荐
- 转:给C++初学者的50个忠告
转:给C++初学者的50个忠告 1.把C++当成一门新的语言学习(和C没啥关系!真的.): ...
- expresscalculate
//本程序接受任意含有+.-.*./和()的数值表达式,数值允许带小数,输入以#结束.如:((2.4+3.5)*2-(2+3.5)/2)*(2+3)# #include <stdio.h> ...
- Threading Module源码概述(一)
Python的Threading模块是建立在thread module基础上的一个模块,在threading模块中,暴露着许多thread模块的属性.比如threading._get_ident实际上 ...
- 在pcDuino上刷了AndDroid,Ubuntu,XBMC
一.Android.Ubuntu.XBMC播放高清视频得比较 1.Andrioid上播放1080P 无压力,硬件解码 2.Ubuntu上用Mplayer播放视频会很卡,可能是没有硬解的原因 3.Ubu ...
- servelt乱码问题(tomcat服务端编码为ISO-8859-1)
Post的编码决定机制: <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...
- linux Tomcat restart脚本简单版
linux系统下重启tomcat的shell脚本: tomcat_home=/opt/apache-tomcat-6.0.32 #找到tomcat进程的id并kill掉 ps -ef |grep t ...
- [Rails Level 2] Ground up
1. Rails commends line: Example: rails new blog --skip-test-unit --database=postgresql
- Android开发艺术探索》读书笔记 (5) 第5章 理解RemoteViews
第5章 理解RemoteViews 5.1 RemoteViews的应用 (1)RemoteViews表示的是一个view结构,它可以在其他进程中显示.由于它在其他进程中显示,为了能够更新它的界面,R ...
- RuntimePermissions
This sample shows runtime permissions available in Android M and above. Display the log on screen to ...
- warning:1071 (42000) Specified key was too long;max key length is 1000 bytes
原因是mysql字段长度设置的太长了, 从而导致mysql在建立索引时,索引长度超过了mysql默认许可的长度 默认 Innodb 允许长度为 767 MyISAM 允许长度为 1000 官方说明 如 ...