Question

任何人都可以解释为什么这不会画布画布吗？画布完美地附加。

$(document).ready(function() {
  var width = $(window).width()
  var height = $(window).height() * 0.8

  var newCanvas = $('<canvas/>', {
    'class': 'cCanvas',
    id: 'myCanvas'
  }).prop({
    width: width,
    height: height
  });
  $('body').append(newCanvas);

  var c = $(".cCanvas")
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 1

您只能从画布获取上下文作为原始HTML DOM元素。

$(function() {
  var width = $(window).width();
  var height = $(window).height() * 0.8;

  var newCanvas = $('<canvas>', {
    class: 'cCanvas',
    id: 'myCanvas'
  }).prop({
    width: width,
    height: height
  }).appendTo('body');

  var c = $(".cCanvas").get(0); // You need to get the raw element.
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

您只需使用

即可

var c = document.getElementById('myCanvas');

我认为这是最好的方式，因为当你使用getEmelentById时，它会返回一个HTML DOM对象。 jQuery $（'。cCanvas'）返回jQuery Object，因此，您还需要指定对象中的第一个元素（.get（0）或[0]）。

在附加后立即绘制到画布？

2 个答案: