如何解决动态创建的画布无法识别/可操作
我尝试不使用任何html来创建和填充蓝色画布。我已经成功渲染了一块空白画布。当我尝试用下面的第二个代码片段中所示的颜色填充画布时,就会发生此问题。在下面的两个片段中,唯一的区别是哪个画布填充了蓝色(第一个填充document.getElementsByClassName("blueCanvas")[0]
有效,而document.getElementsByClassName("blueCanvas")[2]
填充动态创建的画布却失败了。>
我尝试过/注意到的一些事情:
首先,我认为这与创建画布和试图填充画布的js的执行顺序有关,但是即使我在{{1}的开头创建画布,问题仍然存在}。我还认为将元素添加到DOM可能是一个问题,但是它呈现了一个空白画布,所以我看不出这是怎么回事。
谢谢。
<body>
var newCanvas = document.createElement('canvas');
newCanvas.width = '300';
newCanvas.height = '150'
newCanvas.className = 'blueCanvas';
newCanvas.style = 'border:1px solid black'
newCanvas.innerHTML = '<canvas> </canvas>';
document.body.appendChild(newCanvas);
var canvas = document.getElementsByClassName("blueCanvas")[0];
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0,canvas.width,canvas.height);
<canvas id="canvas" class='blueCanvas' width="300" height="150" style="border:1px solid black"></canvas>
<canvas id="canvas" class='blueCanvas' width="300" height="150" style="border:1px solid black"></canvas>
var newCanvas = document.createElement('canvas');
newCanvas.width = '300';
newCanvas.height = '150'
newCanvas.className='blueCanvas';
newCanvas.style= 'border:1px solid black'
newCanvas.innerHTML = '<canvas> </canvas>';
document.body.appendChild(newCanvas);
var canvas = document.getElementsByClassName("blueCanvas")[2];
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0,canvas.height);
解决方法
因为我知道您阅读了我的评论:
function blueCanvas(){
let canvas = document.createElement('canvas'),style = canvas.style,ctx;
canvas.width = 300; canvas.height = 150; canvas.className = 'blueCanvas';
style.border = '1px solid black'; ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue'; ctx.fillRect(0,300,150);
document.body.appendChild(canvas);
}
blueCanvas();
,
不清楚您想要什么。
也许这会有所帮助
const canvas = document.createElement('canvas');
canvas.width = 400; // size it
canvas.height = 300;
canvas.className = 'blueCanvas'; // assign class name
document.body.appendChild(canvas); // add to document
// get context
const ctx = canvas.getContext("2d");
// fill it with blue
ctx.fillStyle = "blue";
ctx.fillRect(0,canvas.width,canvas.height);
ctx.fillStyle = "black";
ctx.font = "32px Arial";
ctx.textAlign = "center";
ctx.fillText("Dynamically added canvas",200,100);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。