菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

游戏 Canvas


HTML <canvas> 元素在网页上显示为一个矩形对象


HTML Canvas

HTML <canvas> 元素非常适合制作游戏。

HTML <canvas> 元素提供了制作游戏所需的所有功能。

使用 JavaScript 在 <canvas> 上绘制、书写、插入图像等。


.getContext("2d")

<canvas> 元素有一个内置对象,称为 getContext("2d") 对象,该对象具有绘制方法和属性。

你可以在我们的 Canvas 教程 中了解有关 <canvas> 元素和 getContext("2d") 对象的更多信息。


开始

要制作游戏,请先创建一个游戏区域,并使其准备好进行绘制

示例

function startGame() {
  myGameArea.start();
}

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  }
}
自己动手试一试 »

对象 myGameArea 将在本教程后面具有更多属性和方法。

函数 startGame() 调用 myGameArea 对象的 start() 方法。

start() 方法创建一个 <canvas> 元素,并将其插入为 <body> 元素的第一个子节点。


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持