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

　　什么是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初始化

　　首先获取对Canvas元素的引用，然后再获取绘图上下文，代码参见initCanvas()函数：

此函数首先通过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坐标，宽、高。

　　填充矩形的代码与清屏的代码类似，相关说明参见清屏函数clearScreen()。

　　四、显示图片

　　在Canvas中显示一幅图片需要分两步实现，首先要加载图片，接下来等图片加载完毕后才能绘制，我们先看看加载图片的代码：

　　function loadPicture(){

　　　　g_image=new Image();

　　　　g_image.src="default.png";

　　　　g_image.οnlοad=function(){

　　　　　　drawPicture();

　　　　}

　　第1步：先创建一个Image对象；

　　第2步：设置此图片对象的src属性，即图片路径（此处是相对路径，即，与JavaScript脚本文件处于相同路径）；

　　第3步：图片加载完毕后，调用绘图函数drawPicture()来绘图。

　　g_image.οnlοad=function(){}表示图片加载完毕后执行花括号中的语句，类似于<body>标签中的οnlοad="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如下图

完整的代码如下：

　　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.οnlοad=function(){

　　　　　　drawPicture();

　　　　}

　　function main(){

　　　　if(!initCanvas()){

　　　　　　console.log("初始化canvas失败！");

　　　　　　return;

　　　　}

　　　　clearScreen();

　　　　fillRedRect();

　　　　drawWhiteRect();

　　　　loadPicture();

　　}

</script>

　　保存以上代码，并在浏览器中打开，将显示如下结果：

　　好了，Canvas基本的绘图功能就介绍完了，现在我们已经完全具备开发简单网页游戏的能力了，接下来将给大家详细介绍如何实现一个数独游戏，敬请关注。

网页游戏开发基础——Canvas基本图形绘制相关推荐

网页游戏开发基础——JavaScript基础知识
对于初学编程的朋友来说,这篇文章有点长,而且会有点难懂.但是请不要放弃,我尽量以通俗的语言解释相关的编程概念,这里只讲解编写一个游戏需要的相关编程概念(如需要会在后面的文章中随时补充相关概念),对其余 ...
Android游戏开发基础part2--Canvas画布
游戏开发基础part2--Canvas画布又过了一周才继续做总结,四级结束了,应该可以多点时间学习游戏编程了. Canvas画布类是一个在游戏当中担当非常重要的角色,它可以绘制出不同的图形和图片,可 ...
浅谈Android游戏开发基础和经验
Android游戏开发基础和经验是本文要介绍的内容,主要是来了解并学习Android游戏开发的内容实例,具体关于Android游戏开发内容的详解来看本文. 做一个类似俄罗斯方块的android游戏开发 ...
【读书笔记《Android游戏编程之从零开始》】16.游戏开发基础（动画）
1. Animation动画在Android 中,系统提供了动画类 Animation ,其中又分为四种动画效果: ● AlphaAnimation:透明度渐变动画 ● ScaleAnimation ...
Android游戏开发基础part3--Paint 画笔
游戏开发基础part3--Paint 画笔 Paint画笔是绘图的辅助类,一般它是作为画布的参数来实现相应的效果,Paint类中包含文字与位图的样式.颜色等属性信息.Paint的常用方法如下: 1.s ...
Android游戏开发基础part4--Bitmap位图的渲染与操作
游戏开发基础part4--Bitmap位图的渲染与操作知识点1:Bitmap与BitmapFactory 如果想通过一张图片资源文件创建一个位图,则要通过位图工厂来索引图片资源文件,从而生成一张位图 ...
TI-BASIC 计算器游戏开发之文字、图形、音频教程 II：图形处理
2019独角兽企业重金招聘Python工程师标准>>> TI-BASIC 计算器游戏开发之文字.图形.音频教程 II:图形处理 [第二部分] TI-BASIC 图形处理教程还没到结 ...
android 实现 3d 文字,android 3d 游戏开发基础第10课-2D文字显示.ppt
<android 3d 游戏开发基础第10课-2D文字显示.ppt>由会员分享,可在线阅读,更多相关<android 3d 游戏开发基础第10课-2D文字显示.ppt(1 ...
Flash 联网游戏开发基础课程
最新提示: A 课程 4月3号开始.课程刚刚开始... 课程主要教授AS3面向对象编程知识以及Flex开发环境.[适合的人群]适合那些还没有足够AS3编程经验以及不熟悉面向对象方式编程的开发者,比如: ...

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

网页游戏开发基础——Canvas基本图形绘制相关推荐

最新文章

热门文章