网页游戏开发基础——Canvas基本图形绘制

跟高小帅学编程

已于 2022-06-27 23:53:18 修改

阅读量1.2k

点赞数

分类专栏：网页游戏开发基础文章标签： javascript 前端 html

于 2022-06-27 23:48:37 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/ggxsxbc/article/details/125494060

版权

本文介绍了HTML5的Canvas标签，用于在网页上绘制2D图形和动画，无需Flash。通过示例代码，展示了如何初始化Canvas、绘制空心矩形、填充矩形以及显示图片的方法，为网页游戏开发打下基础。

摘要由CSDN通过智能技术生成

　　什么是Canvas？Canvas是HTML5新增的一个标签，你可以把它翻译为画布，通过它可以绘制二维或三维图形，有了它就可以不用安装flash而实现复杂的动画功能。如何通过Canvas绘图？下面我们来看一个简单的例子，涵盖Canvas初始化、图片加载、图形绘制、图片显示等基本功能。

　　一、HTML页面结构

　　先看看HTML页面结构，详细代码如下：

　　<title>标签指定网页标题；

　　<meta>标签指定页面使用的字符集；

　　<style>标签定义了一个名叫CenterWarp的样式；

　　<body>标签中的οnlοad="main()"表示页面加载完毕后调用main函数。

　　<body>标签里有一个<div>标签，它的样式表示它的宽高为浏览器客户区的宽高，它的子元素水平、垂直居中。

　　<canvas>标签定义了一块绘图区域，但canvas元素本身不绘制，你必须通过JavaScript脚本来绘制，注意其中的id="GameCanvans"，表示可以通过JavaScript函数document.getElementById("GameCanvans")来将对Canvas元素的引用保存至一个变量中，在随后的代码可通过此变量来调用Canvas的绘图函数。

　　二、Canvas初始化

　　

最低0.47元/天解锁文章

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。