<!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. C算法编程题（七）购物

    前言 上一篇<C算法编程题(六)串的处理> 有些朋友看过我写的这个算法编程题系列,都说你写的不是什么算法,也不是什么C++,大家也给我提出用一些C++特性去实现问题更方便些,在这里谢谢大家 ...

  2. http 错误代码表

    所有 HTTP 状态代码及其定义.  代码  指示  2xx  成功  200  正常:请求已完成.  201  正常:紧接 POST 命令.  202  正常:已接受用于处理,但处理尚未完成.  2 ...

  3. Struts2学习笔记--使用Response下载文件和Struts2的StreamResult文件下载

    使用Response下载文件,servlet中的文件下载是通过流来实现的   我在webRoot文件夹下新建了一个文件夹from,里边放了一张图片,这里就以下载这张图片为例:download.jsp很 ...

  4. 在IIS EXPRESS下运行一个visual studio 项目，跳转到另一个项目的解决方案。

    原因是因为以前有一个项目也是3690端口,然后在3690端口上建立了一个网站,现在的新网站也是用的3690端口,那么会调用以前网站的WEB.CONFIG文件. 解决方法,右键单击网站,然后选择属性.在 ...

  5. Android四大组件之一“广播”

    前言 Android四大组件重要性已经不言而喻了,今天谈谈的是Android中的广播机制.在我们上学的时候,每个班级的教室里都会装有一个喇叭,这些喇叭都是接入到学校的广播室的,一旦有什么重要的通知,就 ...

  6. jQuery-1.9.1源码分析系列（五） 回调对象

    jQuery.Callbacks()提供的回调函数队列管理本来是延时回调处理的一部分,但是后面将其独立出来作为一个模块.jQuery就是这样,各个模块间的代码耦合度是处理的比较好的,值得学习.虽然是从 ...

  7. 实现terminal代理

    问题 作为一名Linuxer,熟练使用终端是一项必备技能,但终端中有时下载安装功能速度很慢,令人崩溃.我自然而然想到了可否加个代理,提高速度.我之前一直用shadowsocks,浏览器使用switch ...

  8. healthMonitoring与运行状况监视

    配置针对应用程序的运行状况监视的一个服务 配置节内容比以往的较为复杂,如下 <healthMonitoring Enabled="true|false" heartbeatI ...

  9. TableLayoutPanel导致的闪屏问题

    界面Load的时候添加对tableLayoutPanel的处理即可,还可设置窗体的DoubleBuffered属性为True tableLayoutPanel1.GetType().GetProper ...

  10. Laravel [1045] 解决方法 Access denied for user 'homestead'@'localhost'

    这几天学习Laravel框架遇到了数据库方面的问题. PDOException in Connector.php line 55:SQLSTATE[HY000] [1045] Access denie ...