<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</title> <style type="text/css"> #canvas{border:1px solid #eee ; display:block; background-color: #B36666; margin: 20px auto; } </style></head><body><div><canvas id = "canvas" width = "1300px" height = "800px"></canvas></div> <script type = "text/javascript" >
window.onload=function(){
var context = document.getElementById('canvas').getContext('2d')
/* translate
translate 属性：context.translate(100,100);
参数1：绘制图时的x坐标的参考点，不再是0
参数2：绘制图时的y坐标的参考点，不再是0
注意：translate会叠加
解决方案：
context.save();
画图代码........
context.restore();
*/
//不使用translate，绘画初始坐标(10,20)
context.strokeRect(10,20,100,150);
//使用 translate ; 绘画初始坐标(50,50)
context.save();//解决叠加方案：
context.translate(50,50);
context.fillStyle='rgba(100,100,200,0.5)';
context.fillRect(0,0,100,150);
context.restore();//解决叠加方案：
/*
如果：使用translate，不添加save、restore方法
那么：translate会叠加会影响往后画的图形
如果：添加save、restore方法
那么：不会影响后面的图形
绘画初始坐标(100+10,100+20)
*/
context.save();//解决叠加方案：
context.translate(100,100);
context.fillStyle='yellow';
context.fillRect(10,20,100,150);
context.restore();//解决叠加方案：

/*
如果：上面例子不添加save、restore方法
那么：translate会叠加：绘画初始坐标(100+50+50,100+100+50)
如果：上面有save、restore方法
那么：绘画初始坐标(50+50,100+50)
*/
context.save();//解决叠加方案：
context.translate(50,100);
context.fillStyle='rgba(200,200,200,0.4)';
context.fillRect(50,50,100,150);
context.restore();//解决叠加方案：

/* lineCap
lineCap 属性：见效果，中间是正常的效果，默认值，只对头尾有效
默认值：context.lineCap='butt';
圆头 ：context.lineCap='round';
方头 ：context.lineCap='square';
*/
context.lineWidth = 20;
context.beginPath();
context.moveTo(240,20);
context.lineTo(240,400);
context.strokeStyle="red";
context.stroke();

context.beginPath();
context.lineTo(280,20);
context.lineTo(280,400);
context.lineCap='round';
context.strokeStyle="green";
context.stroke();

context.beginPath();
context.lineTo(320,20);
context.lineTo(320,400);
context.lineCap='square';
context.strokeStyle="blue";
context.stroke();

/* rotate、scale
rotate 属性：旋转，以弧度为单位
转180度 ：Math.PI
90度 ：Math.PI/2
45度 ：Math.PI/4

scale 属性 放大倍数 context.scale(x,y)
参数x 代表在x轴上放大的倍数
参数y 代表在y轴上放大的倍数
scale除了放大目标的大小之外，还会放大目标元素的其他属性，
例如lineWidth属性，translate属性
*/
//解决叠加方案：
context.save();
//设置起点坐标(450,100)
context.translate(450,100);
//旋转：180/4 = 45度 ，以起点坐标(450,100)为旋转点
context.rotate(Math.PI/4);
//缩放：x缩放1.5倍，y1.3倍，缩放后的高宽(150,130)
context.scale(1.5,1.3);
context.fillStyle='rgba(200,200,200,0.4)';
context.fillRect(0,0,100,100);
context.restore();//解决叠加方案：
}
</script> </body> </html>

偏移：translate ，旋转：rotate，缩放 scale，不知道什么东东：lineCap 实例的更多相关文章

  1. CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  2. CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）（转载）

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...

  3. CSS3 2D变形 transform---移动 translate(x, y), 缩放 scale(x, y), 旋转 rotate(deg), transform-origin, 倾斜 skew(deg, deg)

    transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 变形转换 ...

  4. iOS 2D绘图 (Quartz2D)之Transform(CTM，Translate，Rotate，scale)

    前言:Quartz默认采用设备无关的user space来进行绘图,当context(画板)建立之后,默认的坐标系原点以及方向也就确认了,可以通过CTM(current transformation ...

  5. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  6. 软件项目技术点(2)——Canvas之平移translate、旋转rotate、缩放scale

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transf ...

  7. Animation 动画详解（一）——alpha、scale、translate、rotate、set的xml属性及用法

    一.概述 Android的animation由四种类型组成:alpha.scale.translate.rotate,对应android官方文档地址:<Animation Resources&g ...

  8. [转]Animation 动画详解（一）——alpha、scale、translate、rotate、set的xml属性及用法

    转载:http://blog.csdn.net/harvic880925/article/details/39996643 前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的 ...

  9. android.view.animation(1) - alpha、scale、translate、rotate、set的xml属性和用法(转)

    一.ScaleAnimation ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, floa ...

随机推荐

  1. hdu4831 Scenic Popularity（线段树）

    题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=4831 题目大概意思就是有多个风景区和休息区,每个风景区有热度,休息区的热度与最接近的分景区的热度相同, ...

  2. ECharts使用心得

    ECharts百度旗下图标插件,在展示地图.雷达图等方面有很好的支持. 应用场景: 自动生成X轴的数据: 设置:xAxis的type=value || type=time 并且设置series的dat ...

  3. 制作在线简历（一）——Loading与底部菜单

    想装逼下搞个在线简历,然后顺便用些CSS3与HTML5的一些技术,再顺带把响应式也加上去去,在移动端也能看到. 不过我的配色low了点,还望见谅...... 一.首页Loading效果 这次就打算把几 ...

  4. Oracle如何导出sys用户下的系统表

    环境:Solaris 10 + Oracle 10.2.0.4 1.导出实例 2.参考内容 Reference 1.导出实例 导出sys用户下的HIST_HEAD$和WRI$_OPTSTAT_HIST ...

  5. 由项目浅谈JS中MVVM模式

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.    背景 最近项目原因使用了durandal.js和knock ...

  6. （一）FlexViewer之整体框架解析

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.FlexViewer简介 FlexViewer框架为Esri提供的 ...

  7. Sql Server之数据类型详解

      数据类型是一种属性,用于指定对象可保存的数据的类型,SQL Server中支持多种数据类型,包括字符类型.数值类型以及日期类型等.数据类型相当于一个容器,容器的大小决定了装的东西的多少,将数据分为 ...

  8. react入门（5）

    对前面四篇内容进行简单的回顾: react入门(1):jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other,map循环 react ...

  9. iOS滤镜实现之LOMO（美图秀秀经典LOMO）

    LOMO追求鲜艳色彩,随意.自由的态度,是一种经常使用的滤镜,今天介绍一下iOS 中LOMO滤镜的实现 首先它有3张输入图像 1.我们要处理的图像.即我们要应用LOMO滤镜的图像 2 3 在gpuim ...

  10. SQL常见的系统存储过程

    1.sp_datebases 列出服务器上的所有数据库信息,包括数据库名称和数据库大小 例:exec sp_datebases 2.sp_helpdb 报告有关指定数据库或所有数据库的信息 例:exe ...