HTML5 动态创建画布

Posted

技术标签:

【中文标题】HTML5 动态创建画布【英文标题】:HTML5 Dynamically create Canvas 【发布时间】:2012-05-26 00:30:24 【问题描述】:

您好,我有一个关于使用 javascript 动态创建画布的问题。

我创建一个这样的画布:

var canvas = document.createElement('canvas');
canvas.id     = "CursorLayer";
canvas.width  = 1224;
canvas.height = 768;
canvas.style.zIndex   = 8;
canvas.style.position = "absolute";
canvas.style.border   = "1px solid";

但是当我尝试定位它时,我得到一个null 值:

cursorLayer = document.getElementById("CursorLayer");

我做错了吗?有没有更好的方法来使用 JavaScript 创建画布?

【问题讨论】:

Add canvas to a page with javascript的可能重复 【参考方案1】:

另类

在现代浏览器中使用元素.innerhtml=,即quite fast

document.body.innerHTML = "<canvas width=500 height=150 id='CursorLayer'>";


// TEST

var ctx = CursorLayer.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 50, 50);
canvas  border: 1px solid black 

【讨论】:

【参考方案2】:
 <html>
 <head></head>
 <body>
 <canvas id="canvas"  ></canvas>
 <script>
  var sun = new Image();
  var moon = new Image();
  var earth = new Image();
  function init() 
  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
  window.requestAnimationFrame(draw);
  

  function draw() 
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.globalCompositeOperation = 'destination-over';
  ctx.clearRect(0, 0, 300, 300);

  ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
  ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';
  ctx.save();
  ctx.translate(150, 150);

  // Earth
  var time = new Date();
  ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * 
  time.getMilliseconds());
  ctx.translate(105, 0);
  ctx.fillRect(10, -19, 55, 31); 
  ctx.drawImage(earth, -12, -12);

   // Moon
  ctx.save();
  ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * 
  time.getMilliseconds());
  ctx.translate(0, 28.5);
  ctx.drawImage(moon, -3.5, -3.5);
  ctx.restore();

  ctx.restore();

   ctx.beginPath();
   ctx.arc(150, 150, 105, 0, Math.PI * 2, false);
   ctx.stroke();

   ctx.drawImage(sun, 0, 0, 300, 300);

   window.requestAnimationFrame(draw);
    

   init();
   </script>
   </body>
   </html>

【讨论】:

【参考方案3】:

这是因为您在 DOM 加载之前调用它。首先,创建元素并为其添加属性,然后在 DOM 加载后调用它。在您的情况下,它应该如下所示:

var canvas = document.createElement('canvas');
canvas.id     = "CursorLayer";
canvas.width  = 1224;
canvas.height = 768;
canvas.style.zIndex   = 8;
canvas.style.position = "absolute";
canvas.style.border   = "1px solid";
window.onload = function() 
    document.getElementById("CursorLayer");

【讨论】:

这是错误的,新建元素不会触发window.onload... 没有,但是创建后不能调用太快的元素。创建元素并调用它将返回 null,但如果您稍等片刻或添加 window.onload 它将返回 HTMLElement。 好的,我更明白你的意思了。这在正在加载的页面的上下文中是有意义的,但我在已经加载的页面的上下文中对其进行了测试。【参考方案4】:

问题是您没有在文档正文中插入画布元素。

只需执行以下操作:

document.body.appendChild(canvas);

例子:

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

canvas.id = "CursorLayer";
canvas.width = 1224;
canvas.height = 768;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";


var body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);

cursorLayer = document.getElementById("CursorLayer");

console.log(cursorLayer);

// below is optional

var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(255, 0, 0, 0.2)";
ctx.fillRect(100, 100, 200, 200);
ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
ctx.fillRect(150, 150, 200, 200);
ctx.fillStyle = "rgba(0, 0, 255, 0.2)";
ctx.fillRect(200, 50, 200, 200);

【讨论】:

或者只使用document.body.appendChild(canvas)(您不必使用 getElementsByTagName 搜索它) - 它是文档对象的属性。 @Gerrat 很好。谢谢!但是,这两种方式都是可能的。 谢谢,效果很好!!只有我需要等待 7 分钟才能接受你的 awnser 哈哈 xD 如何在不附加的情况下做到这一点?喜欢 document.write 到当前位置? 如何将画布附加到特定的 div $("div").appendChild(canvas) 是可能的【参考方案5】:

通过 Jquery:

$('<canvas/>',  id: 'mycanvas', height: 500, width: 200);

http://jsfiddle.net/8DEsJ/736/

【讨论】:

jQuery 像往常一样不需要做这个简单的任务。

以上是关于HTML5 动态创建画布的主要内容,如果未能解决你的问题,请参考以下文章

使用动态用户输入在 html5 中创建画布多边形

有没有一种不用图像就可以用 HTML5 画布和 javascript 动态绘制云的好方法?

如何创建中间有孔的画布 html5 剪辑区域?

如何使 HTML5 画布适合动态父/弹性框容器

使用 JCrop 将图像裁剪到画布中

通过动态创建 html 文件元素来上传克隆的画布照片,默认值为画布图像