html5 javascript实现canvas里边多图层显示怎么弄

一、html5 javascript实现canvas里边多图层显示怎么弄

html5中的canvas本身的API是不存在图层概念的。要想实现实现多图层功能，必须要使用多个canvas对象，不过这些canvas对象，是在内存中的，而不是在html的元素树中。每个canvas维持一个图层就可以，然后主canvas是负责显示最后的合成的效果。

var layer1=document.createElement('canvas');

var layer1_canvas=layer1.getContext('2d');

var layer2=document.createElement('canvas');

var layer2_canvas=layer1.getContext('2d');

layer1_canvas.drawSomething();

layer2_canvas.drawSomething();

canvas.save()//用来显示的canvas

canvas.globalCompositeOperation="destination-over";//设置多个图层如何混合，这个可以百度canvas混合模式，这个和PS是相近的

canvas.drawImage(layer1,0,0,800,600,0,0,800,600)

canvas.drawImage(layer2,0,0,800,600,0,0,800,600)

这样就把两个图层绘制在一个图层中，单独改变任一个图层都不会改变其他图层。不明白可追问。

二、为什么我修改不了canvas画布大小

1、在Html页面上加入canvas元素（不能使用js动态加入canvas）。

2、通过Html设置画布大小。可以直接在Html页面上设置Canvas元素的大小：

3、<canvas id="testCanvas" width="200" height="100"></canvas>

4、 var canvas= document.getElementById("testCanvas");

5、需要注意的是，设置画布大小后，画布所有的样式和内容会重置（如画布上的图形会消失，在设置画布大小后需要重新绘制）。

6、首先我们创建一个宽度为200px，高度为100px的画布，它的边框为红色。然后在中间画一个大小为20*20的正方形：

7、<canvas id="testCanvas"></canvas>

8、 canvas= document.getElementById("testCanvas");

9、 canvas.style.border="1px solid red";

10、 context= canvas.getContext("2d");

11、 context.strokeStyle="#99cc33";

12、 context.fillRect(90, 40, 20, 20);

13、我们发现画布是整体按比例缩小了1倍。

14、//设置画布大小后，所有样式会重置。因此需要重新绘制正方形

15、 context.fillRect(90, 40, 20, 20);

16、相当于把画布的右半部和下半部去掉了，达到了我们预期的效果。

三、js Canvas实现的日历时钟案例有哪些

var cxt= document.getElementById(‘元素名’).getContect(‘2d’);

1. clearRect()清空给定矩形内的指定像素。

context.clearRect(x,y,width,height);

x,y|要清除的矩形左上角点的(x,y)坐标

width,height|要清除的矩形宽度和高度，单位为像素12345

var sec= now.getSeconds(); var min= now.getMinutes(); var hour= now.getHours(); 123

cxt.beginPath(); cxt.lineWidth= 10; cxt.strokeStyle="blue"; cxt.arc(550, 310, 300, 0, 360, false); cxt.closePath(); cxt.stroke(); 123456

beginPath()的作用是canvas的绘制方法，都会以上一次beginPath之后的所有路径为基础进行绘制。

closepath()是关闭路径，而不是结束路径，它会试图从当前路径的终点连一条路径到七、起点，让整个路径闭合起来。

cxt.strokeStyle():设置或返回用于笔触的颜色、渐变或模式。

属性值：color指示绘图笔触颜色的 CSS颜色值。默认值是#000000。

gradient用于填充绘图的渐变对象（线性或放射性）

pattern用于创建 pattern笔触的 pattern对象

arc()方法创建弧/曲线（用于创建圆或部分圆）。如需通过 arc()来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

sAngle起始角，以弧度计。（弧的圆形的三点钟位置是 0度）。

counterclockwise可选。规定应该逆时针还是顺时针绘图。False=顺时针，true=逆时针。

4）drawScale—自定义函数画刻度

for(var i= 0; i< size; i++){

drawPointer(width, color, value, i, startx, starty, endx, endy);

cxt.lineWidth= width;//设置画笔的宽度

cxt.strokeStyle= color;//设置画笔的颜色

cxt.translate(550, 310);//重置异次元空间的原点坐标

cxt.rotate(value* angle* Math.PI/ 180);//设置旋转的角度，参数是弧度

cxt.closePath();//先闭合路径，再画线

cxt.restore();//将旋转后的线段返回给画布} 12345678910111213

translate()方法重新映射画布上的(0,0)位置。

var cxt= clock.getContext('2d');

//画指针 function drawPointer(width, color, value, angle, startx, starty, endx, endy){

cxt.lineWidth= width;//设置画笔的宽度

cxt.strokeStyle= color;//设置画笔的颜色

cxt.translate(550, 310);//重置异次元空间的原点坐标

cxt.rotate(value* angle* Math.PI/ 180);//设置旋转的角度，参数是弧度

cxt.closePath();//先闭合路径，再画线

cxt.restore();//将旋转后的线段返回给画布}

//画刻度 function drawScale(size, width, color, value, startx, starty, endx, endy){

for(var i= 0; i< size; i++){

drawPointer(width, color, value, i, startx, starty, endx, endy);

//为表盘的中心填充颜色 function drawFill(){

cxt.arc(550, 310, 7, 0, 360, false);

//画时钟 function drawClock(){

cxt.clearRect(0, 0, 1350, 620);//清空整个画布

var now= new Date();//获取系统时间，取出时,分,秒

cxt.arc(550, 310, 300, 0, 360, false);

drawScale(12, 7,"pink", 30, 0,-280, 0,-260);//画时刻度

drawScale(60, 5,"pink", 6, 0,-280, 0,-270);//画分刻度

drawPointer(7,"purple", hour, 30, 0, 12, 0,-210);//画时针

drawPointer(5,"yellow", min, 6, 0, 15, 0,-240);//画分针

drawPointer(4,"red", sec, 6, 0, 17, 0,-250);//画秒针

drawPointer(3,"red", sec, 6,-7,-235, 0,-255);

drawPointer(3,"red", sec, 6, 7,-235, 0,-255);

setInterval(drawClock, 1000);//setInterval()方法中表示每隔1000ms，就执行drawClock一次 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071