变换
4：变换（原点的偏移，缩放，变大，旋转）
###canvas中的变换
translate(x, y)
我们先介绍 translate 方法，它用来移动 canvas的原点到一个不同的位置。
translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量，
在canvas中translate是累加的
rotate(angle)
这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。
旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法
在canvas中rotate是累加的
scale(x, y)
scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。
值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。
缩放一般我们用它来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大。
在canvas中scale是累加
Scale //放大缩小改变的是画布内，CSS像素的个数，单个CSS像素占据的实际物理尺寸变大
/*
css像素是一个抽象单位
放大:
使画布内css像素的个数变少，单个css像素所占据的实际物理尺寸变大
缩小:
使画布内css像素的个数变多，单个css像素所占据的实际物理尺寸变小
* */
实例：//定时旋转放大
https://github.com/Hightinstance/practice/tree/master/Transform%20_rectangle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
body{
background: pink;
}
#test{
background: gray;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<canvas id="test" width="300" height="300">
<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
</canvas>
</body>
<script type="text/javascript">
window.onload = function(){
var canvas = document.querySelector("#test");
var deg = 0;//角度用于旋转
var flag = 1;
var flagscale = 0;//放大缩小的倍数
if(canvas.getContext){
//获得画笔
var ctx = canvas.getContext("2d");
}
//画笔
//首先需要画一个矩形在中间，需要进行原点的移动
ctx.save();
//
ctx.translate(150,150) //原点偏移 中心点
//然后绘制矩形
ctx.beginPath();//清除路径
ctx.strokeRect(-75,-75,150,150);
ctx.restore();
//动画，定时器 定时器是异步执行的
setInterval(function(){
//首先把当前绘制的图形覆盖掉；清除整个画布
deg++;
ctx.clearRect(0,0,canvas.clientHeight,canvas.clientWidth);
ctx.save();//存入当前状态
//原点偏移
ctx.translate(150,150);
ctx.beginPath();//清除路径
//旋转
ctx.rotate(deg*Math.PI/180);
//放大缩小
if(flagscale>=100)
{
flag = -1; //0 - 100 之间
}
else if(flagscale<=0)
{
flag = 1;
}
flagscale+=flag;
//console.log(flagscale);
//ctx.scale()
var scale = flagscale/50;
ctx.scale(scale,scale);
ctx.strokeRect(-75,-75,150,150);
ctx.restore();
},100)
//清除路径
}
</script>
</html>
浙公网安备 33010602011771号