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

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

　　一、HTML页面结构

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

标签指定网页标题；　　<meta>标签指定页面使用的字符集；　　<style>标签定义了一个名叫CenterWarp的样式；　　<body>标签中的onload="main()"表示页面加载完毕后调用main函数。　　<body>标签里有一个<div>标签，它的样式表示它的宽高为浏览器客户区的宽高，它的子元素水平、垂直居中。　　<canvas>标签定义了一块绘图区域，但canvas元素本身不绘制，你必须通过JavaScript脚本来绘制，注意其中的id="GameCanvans"，表示可以通过JavaScript函数document.getElementById("GameCanvans")来将对Canvas元素的引用保存至一个变量中，在随后的代码可通过此变量来调用Canvas的绘图函数。　　二、Canvas初始化　　首先获取对Canvas元素的引用，然后再获取绘图上下文，代码参见initCanvas()函数：<div class='pgc-img'></div> 此函数首先通过g_canvas=document.getElementById("GameCanvans")函数将Canvas元素的引用保存至全局变量g_canvas中，接着通过g_canvas获取Canvas元素的绘图上下文，并将绘图上下文保存至全局变量g_context中，即g_context=g_canvas.getContext("2d");在接下来的代码中通过此全局变量来调用Canvas的绘图函数。注意：getContext()函数的参数为"2d"，表示获取的是2d绘图上下文，即进行二维绘制。接下来的代码设置了Canvas的宽、高，分别为320和240，最后根据初始化的结果返回true或false。函数clearScreen()的作用是用黑色填充整个Canvas区域，即用黑色清屏。fillRect（）函数有四个参数，依次为填充区域左上角x、y坐标，填充区域宽、高。　　三、绘制空心矩形、填充矩形　　绘制空心矩形需要设置strokeStyle，即矩形边框颜色，然后调用strokeRect()函数，四个参数依次为矩形左上角x、y坐标，宽、高。<div class='pgc-img'></div>　　填充矩形的代码与清屏的代码类似，相关说明参见清屏函数clearScreen()。　　四、显示图片　　在Canvas中显示一幅图片需要分两步实现，首先要加载图片，接下来等图片加载完毕后才能绘制，我们先看看加载图片的代码：　　function loadPicture(){　　　　g_image=new Image();　　　　g_image.src="default.png";　　　　g_image.onload=function(){　　　　　　drawPicture();　　　　}　　}　　第1步：先创建一个Image对象；　　第2步：设置此图片对象的src属性，即图片路径（此处是相对路径，即，与JavaScript脚本文件处于相同路径）；　　第3步：图片加载完毕后，调用绘图函数drawPicture()来绘图。　　g_image.onload=function(){}表示图片加载完毕后执行花括号中的语句，类似于<body>标签中的onload="main()"，页面加载完毕后执行main()函数。　　最后，让我们来看看drawPicture()函数的代码　　function drawPicture(){　　　　g_context.drawImage(g_image,0,0,300,180,10,50,300,180);　　}　　即，调用Canvas的drawImage()函数绘图，其参数含义分别表示：　　1、g_image：图片对象　　2、0：图像左上角x坐标　　3、0：图像左上角y坐标　　4、300：图像宽度　　5、180：图像高度　　此例中图片尺寸为400×400，（0,0,300,180）表示从图片左上角（0,0）处复制300×180部分图片到Canvas中　　6、10：表示在Canvas中绘制的左上角x坐标　　7、50：表示在Canvas中绘制的左上角y坐标　　8、300：表示在Canvas中绘制的宽度　　9、180：表示在Canvas中绘制的高度　　将参数8和参数9改为与参数4、参数5不一样的数值可以实现缩放效果。default.png如下图<div class='pgc-img'></div>完整的代码如下：<script type="text/javascript">　　var g_canvas,g_context,g_image;　　function initCanvas(){　　　　g_canvas=document.getElementById("GameCanvans");　　　　g_context=g_canvas.getContext("2d");　　　　g_canvas.width=320;　　　　g_canvas.height=240;　　　　return (g_canvas&&g_context);　　} 　　function clearScreen(){　　　　g_context.fillStyle="black";　　　　g_context.fillRect(0,0,320,240);　　} 　　function drawWhiteRect(){　　　　g_context.strokeStyle="white";　　　　g_context.strokeRect(10,30,300,10);　　} 　　function fillRedRect(){　　　　g_context.fillStyle="red";　　　　g_context.fillRect(10,10,300,10);　　} 　　function drawPicture(){　　　　g_context.drawImage(g_image,0,0,300,180,10,50,300,180);　　} 　　function loadPicture(){　　　　g_image=new Image();　　　　g_image.src="default.png";　　　　g_image.onload=function(){　　　　　　drawPicture();　　　　}　　} 　　function main(){　　　　if(!initCanvas()){　　　　　　console.log("初始化canvas失败！");　　　　　　return;　　　　}　　　　clearScreen();　　　　fillRedRect();　　　　drawWhiteRect();　　　　loadPicture();　　}</script>　　保存以上代码，并在浏览器中打开，将显示如下结果：<div class='pgc-img'></div>　　好了，Canvas基本的绘图功能就介绍完了，现在我们已经完全具备开发简单网页游戏的能力了，接下来将给大家详细介绍如何实现一个数独游戏，敬请关注。 </div> </div> </div> <div class="block"> <div class="posttitle"><h4>相关文章</h4></div> <div class="relatecon"> <div class="relatelist"><a href="http://www.deer33.com/post/2578.html" title="DQN 玩 2048 实战|第一期!搭建游戏环境(附 PyGame 可视化源码)">DQN 玩 2048 实战|第一期!搭建游戏环境(附 PyGame 可视化源码)</a>2025-03-28</div><div class="relatelist"><a href="http://www.deer33.com/post/2580.html" title="DeepSeek用137秒生成课堂互动游戏，手把手教你怎么操作">DeepSeek用137秒生成课堂互动游戏，手把手教你怎么操作</a>2025-03-28</div><div class="relatelist"><a href="http://www.deer33.com/post/2581.html" title="用AI写代码效率翻5倍!实测用DeepSeek，编程小白也能秒出小游戏">用AI写代码效率翻5倍!实测用DeepSeek，编程小白也能秒出小游戏</a>2025-03-28</div><div class="relatelist"><a href="http://www.deer33.com/post/2582.html" title="利用DeepSeek生成3D模型的网页代码">利用DeepSeek生成3D模型的网页代码</a>2025-03-28</div><div class="relatelist"><a href="http://www.deer33.com/post/2583.html" title="用DEEPSEEK 写的小游戏，直接运行太牛了!~">用DEEPSEEK 写的小游戏，直接运行太牛了!~</a>2025-03-28</div><div class="relatelist"><a href="http://www.deer33.com/post/2585.html" title="网页游戏的开发流程">网页游戏的开发流程</a>2025-03-28</div> </div> </div> </div> <div class="sidebar fixed"> <dl id="divCatalog" class="sidebox"> <dt class="sidetitle">网站分类</dt> <dd> <ul><li><a title="技术文章" href="http://www.deer33.com/?cate=1">技术文章</a></li> </ul> </dd> </dl><dl id="divTags" class="sidebox"> <dt class="sidetitle">标签列表</dt> <dd> <ul><li><a title="数据库设计工具有哪些" href="http://www.deer33.com/tags-2.html">数据库设计工具有哪些 (34)</a></li> <li><a title="网上商城项目完整源码" href="http://www.deer33.com/tags-3.html">网上商城项目完整源码 (34)</a></li> <li><a title="系统管理系统" href="http://www.deer33.com/tags-6.html">系统管理系统 (43)</a></li> <li><a title="round向上取整公式怎么用" href="http://www.deer33.com/tags-7.html">round向上取整公式怎么用 (57)</a></li> <li><a title="htmlinput属性" href="http://www.deer33.com/tags-11.html">htmlinput属性 (46)</a></li> <li><a title="html5下载官方网站" href="http://www.deer33.com/tags-12.html">html5下载官方网站 (48)</a></li> <li><a title="python正则表达式使用实例" href="http://www.deer33.com/tags-15.html">python正则表达式使用实例 (35)</a></li> <li><a title="程序员需要考哪些证书" href="http://www.deer33.com/tags-16.html">程序员需要考哪些证书 (34)</a></li> <li><a title="程序员基础知识" href="http://www.deer33.com/tags-17.html">程序员基础知识 (33)</a></li> <li><a title="源代码电影在线播放" href="http://www.deer33.com/tags-26.html">源代码电影在线播放 (37)</a></li> <li><a title="java我的世界启动器" href="http://www.deer33.com/tags-29.html">java我的世界启动器 (44)</a></li> <li><a title="手机数控编程软件免费" href="http://www.deer33.com/tags-36.html">手机数控编程软件免费 (56)</a></li> <li><a title="如何编程序" href="http://www.deer33.com/tags-37.html">如何编程序 (35)</a></li> <li><a title="手机编程游戏软件" href="http://www.deer33.com/tags-43.html">手机编程游戏软件 (35)</a></li> <li><a title="简单学生的网页代码" href="http://www.deer33.com/tags-44.html">简单学生的网页代码 (35)</a></li> <li><a title="sql必知必会" href="http://www.deer33.com/tags-56.html">sql必知必会 (36)</a></li> <li><a title="二次函数公式大全表格" href="http://www.deer33.com/tags-59.html">二次函数公式大全表格 (36)</a></li> <li><a title="jquery事件处理" href="http://www.deer33.com/tags-62.html">jquery事件处理 (34)</a></li> <li><a title="jquery ui下载" href="http://www.deer33.com/tags-63.html">jquery ui下载 (36)</a></li> <li><a title="jquery是什么库" href="http://www.deer33.com/tags-64.html">jquery是什么库 (35)</a></li> <li><a title="网站免费源码大全下载" href="http://www.deer33.com/tags-153.html">网站免费源码大全下载 (34)</a></li> <li><a title="常用控件" href="http://www.deer33.com/tags-254.html">常用控件 (35)</a></li> <li><a title="wordpress网站建设" href="http://www.deer33.com/tags-329.html">wordpress网站建设 (34)</a></li> <li><a title="反函数和原函数关系" href="http://www.deer33.com/tags-335.html">反函数和原函数关系 (34)</a></li> <li><a title="sqlserver" href="http://www.deer33.com/tags-360.html">sqlserver (34)</a></li> </ul> </dd> </dl><dl id="divComments" class="sidebox"> <dt class="sidetitle">最新留言</dt> <dd> <ul></ul> </dd> </dl></div> </div> </div> </div> </div> <div class="footer"> <div class="fademask"></div> <div class="wrap"> <h3><a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2024111239号-17 </a></h3>  </div> </div> <div class="edgebar"> </div></body> </html>

迪三三百科

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