时间戳

首页 > 解决方案 > 试图在 javascript 中绘制形状，但功能不会在浏览器中加载

javascript - 试图在 javascript 中绘制形状，但功能不会在浏览器中加载

问题描述

我正在尝试使用 js canvas 标签绘制一个形状，我将它保存在一个函数中。当我加载浏览器时，它只是空的，我不确定我做错了什么。这是代码。

window.onload = function() {
  var c = document.getElementById("myCanvas");

  draw()
  var ctx = c.getContext("2d");

  function draw()
  ctx.fillStyle = "#FF0000";

  ctx.fillRect(0, 0, 600, 600);



  ctx.fillStyle = "blue"
  ctx.fillRect(250, 250, 50, 50)
}

标签： javascripthtmlcanvas

解决方案

您以错误的方式声明了您的函数，这就是它不起作用的原因。您忘记在函数声明中添加大括号。在声明后也调用一个函数。

window.onload = function() {
  var c = document.getElementById("myCanvas");

  var ctx = c.getContext("2d");

  function draw() { // added curly brackets
    ctx.fillStyle = "#FF0000";

    ctx.fillRect(0, 0, 600, 600);



    ctx.fillStyle = "blue"
    ctx.fillRect(250, 250, 50, 50)
  } // added curly brackets

  draw(); // after function declaration
}

推荐阅读