<!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. 前端编码风格规范之 JavaScript 规范

    JavaScript 规范 全局命名空间污染与 IIFE 总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression),用以创建独立隔绝的定义域.这 ...

  2. Introduction to the Service Provider Interfaces--官方文档

    地址:https://docs.oracle.com/javase/tutorial/sound/SPI-intro.html What Are Services? Services are unit ...

  3. Angularjs CURD

    前言 基于一个手机端的项目使用了angularjs,硬着头皮去用,有很多的疑问还需要一一去验证,刚开始总是感觉找不到北,总是感觉有很多概念,而且似乎ng既夹杂MVC又夹杂MVVM的思想, 忙里偷闲敲了 ...

  4. 【406错误】 The resource identified by this request is only capable of generating responses with characteristics not acceptable according to the request "accept" headers.

    今天遇到一个奇怪的错误,关于Springmvc的,我明明在Controller方法中写了@ResponseBody,返回一个Map,结果报了406错误. 结果发现,少了一个jar包: 加上去就没事了.

  5. [Java 基础]方法

    方法的定义 Java方法是语句的集合,它们在一起执行一个功能. 方法是解决一类问题的步骤的有序组合 方法包含于类或对象中 方法在程序中被创建,在其他地方被引用 语法 修饰符 返回值类型 方法名 (参数 ...

  6. 你不知道的HttpHandler相关知识

    一.关于IHttpHandler.IsReusable 很多人不明白,这哥们到底干嘛的,估计是微软最初的一个想法--让一个对象可以一直不断地被重复使用 ,但这个想法不成熟,会带来很多隐藏问题,一个对象 ...

  7. Autofac - 程序集扫描

    通过程序集扫描, 能够自动注册符合规则的类型. 这种方式, 很方便. 这一篇就介绍下程序集扫描吧. 一.扫描 其实前面已经介绍过, 这种方式. 不过并不全. 先看一个之前的方式: var builde ...

  8. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  9. 判别或预测方法汇总（判别分析、神经网络、支持向量机SVM等）

    %% [Input]:s_train(输入样本数据,行数为样本数,列为维数):s_group(训练样本类别):s_sample(待判别数据)%% [Output]:Cla(预测类别) function ...

  10. SOA的浅析

    曾今SOA的概念犹如今日“云计算.大数据”一样,被炒得火热,不少企业便纷纷响应,并宣称会拥抱和实施SOA.而事实上,业界出现了两种极端:一种是由于各类文章和书籍关于SOA的描述往往太过抽象,再加上各大 ...