Canvas 绘制另一个 Canvas - Canvas 基础教程

在 Canvas 图像来源 CanvasImageSource 章节中我们有提到可以使用 HTMLCanvasElement 作为 drawImage() 的图像来源

HTMLCanvasElement 是什么呢？就是一个 canvas 元素

也就是说，我们可以使用一个 canvas 作为图像绘制到另一个 Canvas 上

我们先准备一个大小为 300x50 的 canvas1 上面绘制 简单教程，简单编程

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="300" height="50">
</canvas>

<script>
var canvas1  = document.getElementById("canvas-1");
var ctx = canvas1.getContext("2d");
ctx.fillStyle="#eeeeee";
ctx.fillRect(0,0,canvas1.width,canvas1.height);
ctx.font = "24px Microsoft YaHei"
ctx.textBaseline = "middle";
ctx.textAlign="center";
ctx.fillStyle="#333333";
ctx.fillText("简单教程，简单编程",canvas1.width/2,canvas1.height/2);
</script>

运行结果如下

然后我们使用 drawImage(canvas1) 将这个 canvas1 绘制到另一个画板 ( Canvas ) 上

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="400" height="100">
</canvas>

<script>
var canvas1  = document.createElement("canvas");
var ctx = canvas1.getContext("2d");
canvas1.width  = 300;
canvas1.height = 50;
ctx.fillStyle="#eeeeee";
ctx.fillRect(0,0,canvas1.width,canvas1.height);
ctx.font = "24px Microsoft YaHei"
ctx.textBaseline = "middle";
ctx.textAlign="center";
ctx.fillStyle="#333333";
ctx.fillText("简单教程，简单编程",canvas1.width/2,canvas1.height/2);


var canvas2  = document.getElementById("canvas-2");
var ctx2 = canvas2.getContext("2d");
ctx2.fillStyle="green";
ctx2.fillRect(0,0,canvas2.width,canvas2.height);
ctx2.drawImage(canvas1,(canvas2.width-canvas1.width)/2,(canvas2.height-canvas1.height)/2,canvas1.width,canvas1.height);
</script>

运行效果如下