7.使Canvas填满浏览器窗口
Canvas中不支持百分比,可以将Canvas元素的宽度和高度精确设置为浏览器窗口的宽度和高度。
使用window浏览器对象和jQuery方法获取窗口的宽度和高度。
<script>
$(window).resize(reiszeCanvas); //resize:当浏览器窗口调整时触发resize方法
function reiszeCanvas(){
var canvas=$("#myCanvas");
var context=canvas.get(0).getContext("2d");
canvas.attr("width",$(window).get(0).innerWidth);
canvas.attr("height",$(window).get(0).innerHeight);
context.fillRect(0,0,canvas.width(),canvas.height());
}
reiszeCanvas();
</script>
利用css填充显示的空白边框
css中:*{margin:0;padding:0}
html,body{height:100%;width:100%}
canvas{display:block;}
8.保存绘图状态
context.save();
调用多个save方法可以将状态逐一保存在栈中。
9.恢复绘图状态
context.restore();
从栈中取出保存的状态。
10.变形
10.1 平移
平移中移动的是2D渲染上下文的坐标原点,而不是所绘制的对象。
平移:context.translate(100,100);
平移之后搜绘制图形的原点为平移的点。
10.2 缩放
context.scale(x,y);其中x,y代表的是缩放的倍数,缩放会影响之后绘制的图形
如果想要缩放一个图形并不影响之后绘制的图形,可以使用scale,restore和translate组合方法
context.save(); //保存画布状态
context.translate(100,100); //将原点平移到(100,100)
context.scale(2,2); //将画布放大2倍
context.fillRect(0,0,100,100); //绘制图形
context.restore(); //恢复保存的状态
context.fillRect(0,0,50,50); //新绘制的图形不受之前的变形的影响
10.3 旋转
旋转并非是图形本身,而是图形绕着其原点进行旋转,如果要只旋转一个图形,要使用translate的方法将上下文的原点平移到图形的中心。
context.translate(200,200);
context.rotate(Math.PI/4); //旋转45度
context.fillRect(0,0,100,100);
10.4 变换矩阵
变换矩阵:所使用的所有变形方法都会影响一个东西。在画布中使用一个3*3的矩阵
[a c e] [x轴缩放 x轴倾斜 x轴平移]
[b d f]=[y轴倾斜 y轴缩放 y轴平移]
[0 0 1] [0 0 1 ]
矩阵的默认值是一个单位矩阵(完全未执行过变形)
[1 0 0]
[0 1 0]
[0 0 1]
10.4.1 操作变换矩阵
执行平移和缩放:transform(a,b,c,d,e,f);
重置为单位矩阵:context.setTransform(1,0,0,1,0,0);
练习:通过操作变换矩阵执行倾斜和缩放实现图形的旋转
context.setTransform(1,0,0,1,0,0); //重置为单位矩阵
var xScale=Math.cos(Math.PI/4);
var ySkew=-Math.sin(Math.PI/4);
var xSkew=Math.sin(Math.PI/4);
var yScale=Math.cos(Math.PI/4);
var xTrans=200;
var yTrans=200;
context.transform(xScale,ySkew,xSkew,yScale,xTrans,yTrans);
context.fillRect(0,0,100,100);
10.4 合成
10.4.1 全局阿尔法值
globalAlpha:设置透明度,值在0.0(全透明)到1.0(不透明)之间,默认值为1.0
context.globalAlpha=0.5;
10.4.2 合成操作
源:绘制的新图形
context.globalCompositeOperation="source-over"; //源(新绘制的图形)覆盖于目标之上
context.globalCompositeOperation="destination-over"; //源在目标之下
context.globalCompositeOperation="source-atop"; //不在重合区之外的的源是透明的
context.globalCompositeOperation="destination-atop"; //不在重合区之外的的目标是透明的
context.globalCompositeOperation="source-in"; //除了重合区中的源,其他区域都是透明的
context.globalCompositeOperation="destination-in"; //除了重合区中的目标,其他区域都是透明的
context.globalCompositeOperation="source-out"; //除了源中非重合区域,其他区域都是透明的
context.globalCompositeOperation="destination-out"; //除了目标中的非重合区域,其他区域都是透明的
context.globalCompositeOperation="lighter"; //重合区域的颜色值相加
context.globalCompositeOperation="copy"; //只绘制源,覆盖掉目标
context.globalCompositeOperation="xor"; //重叠处为透明
10.5阴影
context.shadowBlur=20; //阴影的模糊值
context.shadowOffsetX=10; //阴影右下移
context.shadowOffsetY=10;
context.shadowColor="pink"; //阴影的颜色
Canvas中不支持百分比,可以将Canvas元素的宽度和高度精确设置为浏览器窗口的宽度和高度。
使用window浏览器对象和jQuery方法获取窗口的宽度和高度。
<script>
$(window).resize(reiszeCanvas); //resize:当浏览器窗口调整时触发resize方法
function reiszeCanvas(){
var canvas=$("#myCanvas");
var context=canvas.get(0).getContext("2d");
canvas.attr("width",$(window).get(0).innerWidth);
canvas.attr("height",$(window).get(0).innerHeight);
context.fillRect(0,0,canvas.width(),canvas.height());
}
reiszeCanvas();
</script>
利用css填充显示的空白边框
css中:*{margin:0;padding:0}
html,body{height:100%;width:100%}
canvas{display:block;}
8.保存绘图状态
context.save();
调用多个save方法可以将状态逐一保存在栈中。
9.恢复绘图状态
context.restore();
从栈中取出保存的状态。
10.变形
10.1 平移
平移中移动的是2D渲染上下文的坐标原点,而不是所绘制的对象。
平移:context.translate(100,100);
平移之后搜绘制图形的原点为平移的点。
10.2 缩放
context.scale(x,y);其中x,y代表的是缩放的倍数,缩放会影响之后绘制的图形
如果想要缩放一个图形并不影响之后绘制的图形,可以使用scale,restore和translate组合方法
context.save(); //保存画布状态
context.translate(100,100); //将原点平移到(100,100)
context.scale(2,2); //将画布放大2倍
context.fillRect(0,0,100,100); //绘制图形
context.restore(); //恢复保存的状态
context.fillRect(0,0,50,50); //新绘制的图形不受之前的变形的影响
10.3 旋转
旋转并非是图形本身,而是图形绕着其原点进行旋转,如果要只旋转一个图形,要使用translate的方法将上下文的原点平移到图形的中心。
context.translate(200,200);
context.rotate(Math.PI/4); //旋转45度
context.fillRect(0,0,100,100);
10.4 变换矩阵
变换矩阵:所使用的所有变形方法都会影响一个东西。在画布中使用一个3*3的矩阵
[a c e] [x轴缩放 x轴倾斜 x轴平移]
[b d f]=[y轴倾斜 y轴缩放 y轴平移]
[0 0 1] [0 0 1 ]
矩阵的默认值是一个单位矩阵(完全未执行过变形)
[1 0 0]
[0 1 0]
[0 0 1]
10.4.1 操作变换矩阵
执行平移和缩放:transform(a,b,c,d,e,f);
重置为单位矩阵:context.setTransform(1,0,0,1,0,0);
练习:通过操作变换矩阵执行倾斜和缩放实现图形的旋转
context.setTransform(1,0,0,1,0,0); //重置为单位矩阵
var xScale=Math.cos(Math.PI/4);
var ySkew=-Math.sin(Math.PI/4);
var xSkew=Math.sin(Math.PI/4);
var yScale=Math.cos(Math.PI/4);
var xTrans=200;
var yTrans=200;
context.transform(xScale,ySkew,xSkew,yScale,xTrans,yTrans);
context.fillRect(0,0,100,100);
10.4 合成
10.4.1 全局阿尔法值
globalAlpha:设置透明度,值在0.0(全透明)到1.0(不透明)之间,默认值为1.0
context.globalAlpha=0.5;
10.4.2 合成操作
源:绘制的新图形
context.globalCompositeOperation="source-over"; //源(新绘制的图形)覆盖于目标之上
context.globalCompositeOperation="destination-over"; //源在目标之下
context.globalCompositeOperation="source-atop"; //不在重合区之外的的源是透明的
context.globalCompositeOperation="destination-atop"; //不在重合区之外的的目标是透明的
context.globalCompositeOperation="source-in"; //除了重合区中的源,其他区域都是透明的
context.globalCompositeOperation="destination-in"; //除了重合区中的目标,其他区域都是透明的
context.globalCompositeOperation="source-out"; //除了源中非重合区域,其他区域都是透明的
context.globalCompositeOperation="destination-out"; //除了目标中的非重合区域,其他区域都是透明的
context.globalCompositeOperation="lighter"; //重合区域的颜色值相加
context.globalCompositeOperation="copy"; //只绘制源,覆盖掉目标
context.globalCompositeOperation="xor"; //重叠处为透明
10.5阴影
context.shadowBlur=20; //阴影的模糊值
context.shadowOffsetX=10; //阴影右下移
context.shadowOffsetY=10;
context.shadowColor="pink"; //阴影的颜色