网页游戏开发基础——Canvas基本图形绘制_网站文章_新闻动态

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

　　一、HTML页面结构

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

标签指定网页标题；</p><p data-track="5">　　<meta>标签指定页面使用的字符集；</p><p data-track="6">　　<style>标签定义了一个名叫CenterWarp的样式；</p><p data-track="7">　　<body>标签中的onload="main()"表示页面加载完毕后调用main函数。</p><p data-track="8">　　<body>标签里有一个<div>标签，它的样式表示它的宽高为浏览器客户区的宽高，它的子元素水平、垂直居中。</p><p data-track="9">　　<canvas>标签定义了一块绘图区域，但canvas元素本身不绘制，你必须通过JavaScript脚本来绘制，注意其中的id="GameCanvans"，表示可以通过JavaScript函数document.getElementById("GameCanvans")来将对Canvas元素的引用保存至一个变量中，在随后的代码可通过此变量来调用Canvas的绘图函数。</p><p data-track="10">　　<strong>二、Canvas初始化</strong></p><p data-track="11">　　首先获取对Canvas元素的引用，然后再获取绘图上下文，代码参见initCanvas()函数：</p><p data-track="12"><br/></p><p data-track="13">此函数首先通过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。</p><p data-track="14">函数clearScreen()的作用是用黑色填充整个Canvas区域，即用黑色清屏。fillRect（）函数有四个参数，依次为填充区域左上角x、y坐标，填充区域宽、高。</p><p data-track="15">　　<strong>三、绘制空心矩形、填充矩形</strong></p><p data-track="16">　　绘制空心矩形需要设置strokeStyle，即矩形边框颜色，然后调用strokeRect()函数，四个参数依次为矩形左上角x、y坐标，宽、高。</p><p data-track="17">　　填充矩形的代码与清屏的代码类似，相关说明参见清屏函数clearScreen()。</p><p data-track="18">　　<strong>四、显示图片</strong></p><p data-track="19">　　在Canvas中显示一幅图片需要分两步实现，首先要加载图片，接下来等图片加载完毕后才能绘制，我们先看看加载图片的代码：</p><p data-track="20">　　function loadPicture(){</p><p data-track="21">　　　　g_image=new Image();</p><p data-track="22">　　　　g_image.src="default.png";</p><p data-track="23">　　　　g_image.onload=function(){</p><p data-track="24">　　　　　　drawPicture();</p><p data-track="25">　　　　}</p><p data-track="26">　　}</p><p data-track="27">　　第1步：先创建一个Image对象；</p><p data-track="28">　　第2步：设置此图片对象的src属性，即图片路径（此处是相对路径，即，与JavaScript脚本文件处于相同路径）；</p><p data-track="29">　　第3步：图片加载完毕后，调用绘图函数drawPicture()来绘图。</p><p data-track="30">　　g_image.onload=function(){}表示图片加载完毕后执行花括号中的语句，类似于<body>标签中的onload="main()"，页面加载完毕后执行main()函数。</p><p data-track="31">　　最后，让我们来看看drawPicture()函数的代码</p><p data-track="32">　　function drawPicture(){</p><p data-track="33">　　　　g_context.drawImage(g_image,0,0,300,180,10,50,300,180);</p><p data-track="34">　　}</p><p data-track="35">　　即，调用Canvas的drawImage()函数绘图，其参数含义分别表示：</p><p data-track="36">　　1、g_image：图片对象</p><p data-track="37">　　2、0：图像左上角x坐标</p><p data-track="38">　　3、0：图像左上角y坐标</p><p data-track="39">　　4、300：图像宽度</p><p data-track="40">　　5、180：图像高度</p><p data-track="41">　　此例中图片尺寸为400×400，（0,0,300,180）表示从图片左上角（0,0）处复制300×180部分图片到Canvas中</p><p data-track="42">　　6、10：表示在Canvas中绘制的左上角x坐标</p><p data-track="43">　　7、50：表示在Canvas中绘制的左上角y坐标</p><p data-track="44">　　8、300：表示在Canvas中绘制的宽度</p><p data-track="45">　　9、180：表示在Canvas中绘制的高度</p><p data-track="46">　　将参数8和参数9改为与参数4、参数5不一样的数值可以实现缩放效果。</p><p data-track="47">default.png如下图</p><p data-track="48">完整的代码如下：</p><p data-track="49"><script type="text/javascript"></p><p data-track="50">　　var g_canvas,g_context,g_image;</p><p data-track="51">　　function initCanvas(){</p><p data-track="52">　　　　g_canvas=document.getElementById("GameCanvans");</p><p data-track="53">　　　　g_context=g_canvas.getContext("2d");</p><p data-track="54">　　　　g_canvas.width=320;</p><p data-track="55">　　　　g_canvas.height=240;</p><p data-track="56">　　　　return (g_canvas&&g_context);</p><p data-track="57">　　}</p><p data-track="58"><br/></p><p data-track="59">　　function clearScreen(){</p><p data-track="60">　　　　g_context.fillStyle="black";</p><p data-track="61">　　　　g_context.fillRect(0,0,320,240);</p><p data-track="62">　　}</p><p data-track="63"><br/></p><p data-track="64">　　function drawWhiteRect(){</p><p data-track="65">　　　　g_context.strokeStyle="white";</p><p data-track="66">　　　　g_context.strokeRect(10,30,300,10);</p><p data-track="67">　　}</p><p data-track="68"><br/></p><p data-track="69">　　function fillRedRect(){</p><p data-track="70">　　　　g_context.fillStyle="red";</p><p data-track="71">　　　　g_context.fillRect(10,10,300,10);</p><p data-track="72">　　}</p><p data-track="73"><br/></p><p data-track="74">　　function drawPicture(){</p><p data-track="75">　　　　g_context.drawImage(g_image,0,0,300,180,10,50,300,180);</p><p data-track="76">　　}</p><p data-track="77"><br/></p><p data-track="78">　　function loadPicture(){</p><p data-track="79">　　　　g_image=new Image();</p><p data-track="80">　　　　g_image.src="default.png";</p><p data-track="81">　　　　g_image.onload=function(){</p><p data-track="82">　　　　　　drawPicture();</p><p data-track="83">　　　　}</p><p data-track="84">　　}</p><p data-track="85"><br/></p><p data-track="86">　　function main(){</p><p data-track="87">　　　　if(!initCanvas()){</p><p data-track="88">　　　　　　console.log("初始化canvas失败！");</p><p data-track="89">　　　　　　return;</p><p data-track="90">　　　　}</p><p data-track="91">　　　　clearScreen();</p><p data-track="92">　　　　fillRedRect();</p><p data-track="93">　　　　drawWhiteRect();</p><p data-track="94">　　　　loadPicture();</p><p data-track="95">　　}</p><p data-track="96"></script></p><p data-track="97">　　保存以上代码，并在浏览器中打开，将显示如下结果：</p><p data-track="98">　　好了，Canvas基本的绘图功能就介绍完了，现在我们已经完全具备开发简单网页游戏的能力了，接下来将给大家详细介绍如何实现一个数独游戏，敬请关注。</p> </div>  <div class="article-nav"> <div class="nav-item prev"> <span class="nav-label">上一篇</span> <div class="nav-title"><a href="/anyouwz/8079.html">小程序防伪怎么做</a></div> </div> <div class="nav-item next"> <span class="nav-label">下一篇</span> <div class="nav-title"><a href="/anyouwz/8081.html">Python用20行代码就能实现漂亮的网页界面？你确定不来看看</a></div> </div> </div> </div>  <div class="sidebar">  <div class="sidebar-widget reveal"> <div class="widget-title"><i class="fas fa-fire"></i> 随机文章</div> <div class="hot-list"> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/5037.html">占领海外市场，不妨试试这些外贸线上推广法子</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/30580.html">b站封面如何设计才能“见封进”？这些视频封面模板为你助力！</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/16041.html">景观设计性价比高的网站</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/8066.html">杭州网站建设公司是如何制作网页的</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/14659.html">选择靠谱的软件外包公司</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/18689.html">怎么制作公司网页教程</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/1356.html">企业网站建设的心得分享</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/36445.html">thinkphp网站源代码(thinkphp6源码分析)</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/41111.html">沧州正规的短信群发公司</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/37890.html">衡水网站开发所需多长时间？</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/21837.html">物业公司网站建设如何制作？</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/28070.html">中国电建集团山东电力建设第一工程有限公司校招</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/2848.html">如何选择小程序开发公司</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/13121.html">国外潮牌购买网站</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/39545.html">山东齐鲁建设管理有限公司干什么的</a></div> </div> </div> </div> </div> </div> </div> </section>  <footer class="footer"> <div class="container footer-inner"> <div class="footer-brand"> <div class="logo"> <a href="/"> <i><img src="/static/img/logo.png"></i> <span>南京安优网络</span> </a> </div> <p>专注企业网站建设 · 小程序开发 <br />助力企业实现数字化转型与增长。</p> </div> <div class="footer-links"> <div> <h4>服务</h4> <a href="/wzjsfw/" title="网站建设服务">网站建设服务</a> <a href="/xcxfw/" title="小程序开发服务">小程序开发服务</a> </div> <div> <h4>案例中心</h4> <a href="/anyoucase/" title="网站建设案例">网站建设案例</a> <a href="/anyouxcx/" title="小程序开发案例">小程序开发案例</a> </div> <div> <h4>解决方案</h4> <a href="/zhizaoyeshuzihuajianshefangan/" title="制造业数字化建设方案">制造业数字化建设方案</a> <a href="/kejiqiyeguanwangjianshefangan/" title="科技企业官网建设方案">科技企业官网建设方案</a> <a href="/xiandaifuwuyeshuzihuafangan/" title="现代服务业数字化方案">现代服务业数字化方案</a> <a href="/jiaoyupeixunshuzihuafangan/" title="教育培训数字化方案">教育培训数字化方案</a> </div> <div> <h4>新闻动态</h4> <a href="/anyounews/" title="公司新闻">公司新闻</a> <a href="/anyouwz/" title="网站文章">网站文章</a> <a href="/aizsk/" title="知识库">知识库</a> </div> </div> <div class="footer-qr"> <div class="qr-title"><i class="fas fa-qrcode"></i> 关注我们</div> <div class="qr-wrapper"> <img src="/static/img/ewm.jpg" alt="南京安优网络微信公众号二维码" /> </div> <div class="qr-label">扫码关注 · 获取方案</div> </div> </div> <div class="footer-bottom"> <div class="container"> <p>© 2026 南京安优网络科技有限公司 · 用技术创造价值 <a href="https://beian.miit.gov.cn/" target="_blank">苏ICP备12071769号-4</a> <a href="http://www.anyouy.cn/sitemap.xml">网站地图</a></p> </div> </div> </footer>  <div class="online-service"> <div class="service-wrap"> <div class="service-item wechat"> <i class="fab fa-weixin"></i> </div> <div class="popup popup-qr"> <img class="popup-img" src="/static/img/ewm.jpg" alt="微信二维码" /> <div class="popup-label"><i class="fab fa-weixin"></i> 扫码添加微信</div> </div> </div> <div class="service-wrap"> <a href="tel:400-8793-956" class="service-item phone" aria-label="电话咨询"> <i class="fas fa-phone-alt"></i> </a> <div class="popup popup-phone"> <div class="phone-number"> <i class="fas fa-phone-alt"></i> 400-8793-956 </div> <div class="phone-hint">点击直接拨打</div> </div> </div> <div class="service-wrap"> <div class="service-item top" onClick="window.scrollTo({top:0,behavior:'smooth'})"> <i class="fas fa-arrow-up"></i> </div> </div> </div> <script src="/static/js/anyou.js" language="javascript"></script> </body> </html>

最新动态 网站文章

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

最新动态网站文章