<!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. iOS开发之手势识别

    感觉有必要把iOS开发中的手势识别做一个小小的总结.在上一篇iOS开发之自定义表情键盘(组件封装与自动布局)博客中用到了一个轻击手势,就是在轻击TextView时从表情键盘回到系统键盘,在TextVi ...

  2. 如何远程备份MySQL binlog

    以前备份binlog时,都是先在本地进行备份压缩,然后发送到远程服务器中.但是这其中还是有一定风险的,因为日志的备份都是周期性的,如果在某个周期中,服务器宕机了,硬盘损坏了,就可能导致这段时间的bin ...

  3. 关于纠正 C/C++ 之前在函输内改变 变量的一个错误想法。

    再这之前,我曾认为,一个变量只要定义为全局变量后,即使把它以传参的方式传进去一个函数内,也能改变它的值 事实证明,这一想法是错的. 下面我用代码说明,具体注释将写在里面 #include<std ...

  4. 数据库设计（1/9）：数据元（Data Elements）

    对于设计和创建数据库完全是个新手?没关系,Joe Celko,世界上读者数量最多的SQL作者之一,会告诉你这些基础.和往常一样,即使是最专业的数据库老手,也会给他们带来惊喜.Joe是DMBS杂志是多年 ...

  5. js树形控件—zTree使用总结

    0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 ...

  6. QTableWidget行选中/删除/添加行

    1  均分各列 tableWidget->horizontalHeader()->setStretchLastSection(true); //就是这个地方 tableWidget-> ...

  7. 神奇的CSS3按钮特效

    点击这里查看效果 以下是源代码: <!doctype html> <html> <!-- author: @simurai --> <head> < ...

  8. win10与ubuntu下演示运行.net core rc2 1.0.0.3002702程序

    随着.net core rc2(1.0.0.002702)发布的同时,我们也来在本地 win10与ubuntu玩一下吧. 先简单说下.net core ,在.net core rc1中用的是dnx 工 ...

  9. Sql server函数的学习1（系统变量、错误函数、转换函数）

    一.系统变量的介绍和使用 1.@@ERROR 变量 2.@@SERVICENAME 变量 3.@@TOTAL_ERRORS 变量 4.@@TOTAL_READ 变量 5.@@VERSION 变量 二. ...

  10. Spring Boot中静态资源（JS, 图片）等应该放在什么位置

    Spring Boot的静态资源,比如图片应该放在什么位置呢, 如果你放在传统WEB共的类似地方, 比如webapp或者WEB-INF下,你会得到一张示意文件未找到的破碎图片.那应该放哪里呢? 百度一 ...