<!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. Ubuntu杂记——Apache+PHP+MySQL的安装

    昨天晚上,参考博客园的另一篇文章,在自己的Ubuntu上搭建了一个Apache+PHP+MySQL的服务器,在此谨记,以备不时之需. 一.安装Apache sudo apt-get install a ...

  2. 编写简单的ramdisk（有请求队列）

    前言 前面用无请求队列实现的ramdisk的驱动程序虽然申请了请求队列,但实际上没用上,因为ramdisk不像实际的磁盘访问速度慢需要缓存,ramdisk之间使用内存空间,所以就没用请求队列了.本文将 ...

  3. MyCAT简易入门

    MyCAT是mysql中间件,前身是阿里大名鼎鼎的Cobar,Cobar在开源了一段时间后,不了了之.于是MyCAT扛起了这面大旗,在大数据时代,其重要性愈发彰显.这篇文章主要是MyCAT的入门部署. ...

  4. 开启了HA的XenServer如何关闭虚拟机？

    可开启了HA很方便,在主机自己坏掉的情况下其中的虚拟机能自己飘到活的机器上并被运行起来,不过如果手动的需要关闭虚拟机的话在这情况下,该虚拟机会自己"复活"即便我们选的是关机. 此时 ...

  5. linux驱动开发之块设备学习笔记

    我的博客主要用来存放我的学习笔记,如有侵权,请与我练习,我会立刻删除.学习参考:http://www.cnblogs.com/yuanfang/archive/2010/12/24/1916231.h ...

  6. 求一个数组的最大子数组（C/C++实现）

    最大子数组:要求相连,加起来的和最大的子数组就是一个数组的最大子数组.编译环境:VS2012,顺便说句其实我是C#程序员,我只是喜欢学C++. 其实这是个半成品,还有些BUG在里面,不过总体的思路是这 ...

  7. WebSocket 介绍（一）

    WebSocket 发起单个请求,服务端不需要等待客服端,客户端在任何时候也能发消息到服务端,减少了轮询时候的延迟.经历一次连接后,服务器能给客户端发多次.下图是轮询与WebSocket的区别. 基于 ...

  8. 【翻译】设计模式学习系列1---【Design Patterns Simplified: Part 1【设计模式简述：第一部分】】

    原文链接:http://www.c-sharpcorner.com/UploadFile/19b1bd/design-patterns-simplified-part1/ Design Pattern ...

  9. Web 上传图片加水印

    上传图片加水印 需要使用控件FileUpload 上传按钮Image控件展示上传的图片,页面中拖入三个控件 <form id="form1" runat="serv ...

  10. Java02

    一.IDE的概念.eclipse的介绍.安装.使用 (用eclipse写HelloWorld例子)     1.什么是IDE(Integrated Development Environment)? ...