javascript - 通过html5 Canvas 绘制一个矩形?

标签 javascript html canvas

我是一名初学者,我一直坚持在 html 5 的 Canvas 上绘制矩形; 我的 html 代码:

<script src="new 3y.js"></script>
<title>test</title>
</head>
<body>
<section id="main">
    <canvas id="canvas" width="600" height="400">
      test
    </canvas>
</section>
</body

我的js代码:

function doFirst() {
var x = document.getElementbyId('canvas');
canvas = x.getContext("2d");
canvas.strokeRect(10,10,100,200);
}

window.addEventListener("load" , doFirst ,false);

最佳答案

问题是您使用的是 document.getElementbyId,但 b 必须是大写。

解决这个问题,您的代码就可以正常工作了:

function doFirst() {
  var x = document.getElementById('canvas');
  canvas = x.getContext("2d");
  canvas.strokeRect(10,10,100,200);
}

window.addEventListener("load" , doFirst ,false);
<body>
<section id="main">
    <canvas id="canvas" width="600" height="400">
      test
    </canvas>
</section>
</body>

关于javascript - 通过html5 Canvas 绘制一个矩形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32891424/

相关文章:

javascript - 附加div内容jquery

javascript - 如何在for循环中顺序调用JavaScript函数?

javascript - sum(x,y) 与 sum.call(undefined,x,y) 之间的区别

java - 放大 Canvas 中的点,所有内容都基于某个点

javascript - 如何在此示例中添加 ondrag 鼠标事件

javascript - 赋值中的左侧无效 : Uncaught ReferenceError:

android - HTML 输入类型 'file' 不适用于 android 中的 webview。有没有办法使用 webview android 上传文件?

javascript - 我无法在 html 中显示部分

javascript - JQuery 图像 slider 中的自动增量图像

javascript - 如何从 tileLayer Leaflet 1.0 获取 Canvas