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

myzbx 2024-12-25 14:07 40 浏览

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

　　一、HTML页面结构

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

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

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

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

　　<body>标签中的onload="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.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如下图

完整的代码如下：

　　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>

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

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

HTML 图形

上一篇：「HTTP」Web页面是如何呈现的? web页面和http页面
下一篇：如何用HTML5制作网页?HTML5和html有什么区别?

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

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿