Muh*_*man 1 javascript html5 canvas drawimage html5-canvas
我想用一个单一的画布上绘制多个画布drawImage()方法,但它不能正常工作
守则
<html>
<head>
<script>
window.onload = function() {
var context1= document.getElementById("canvas1").getContext("2d");
var context2 = document.getElementById("canvas2").getContext("2d");
var context3 = document.getElementById("canvas3").getContext("2d");
context1.font = "20pt Calibri";
context1.fillStyle = "blue";
context1.fillText("Hello ", 50, 25);
context2.font = "20pt Calibri";
context2.fillStyle = "red";
context2.fillText("World!", 100, 25);
var imageObj = new Image();
imageObj.onload = function() {
context3.drawImage(context1.canvas, 50, 25);
context3.drawImage(context2.canvas, 100, 25);
};
};
</script>
</head>
<body>
<canvas id="canvas1" class="canvas" width="200" height="50"></canvas>
<canvas id="canvas2" class="canvas" width="200" height="50"></canvas>
<canvas id="canvas3" class="canvas" width="200" height="50"></canvas>
</body>
</html>?
你的图像没有来源.如果你想看到一些东西,请添加一个.只要您没有src,就无法调用onload函数.
并且您必须将图像提供给drawImage函数:
var imageObj = new Image();
imageObj.onload = function() {
context3.drawImage(imageObj, 50, 25);
context3.drawImage(imageObj, 100, 25);
};
imageObj.src = "someFile.png";
如果您要做的是在context3上绘制canvas1和canva2,只需在imageObj.onload函数之外完成所有这些,这个函数从未被调用:http://jsfiddle.net/KCyvE/
评论中的问题后的精确度:
我的代码在小提琴中使用context1.canvas.这工作,因为上下文是一个实例CanvasRenderingContext2D,因而具有命名属性canvas这是一个"向后引用为其创建此背景下canvas元素".