h5游戏之js图形封装使用01

最新推荐文章于 2024-05-10 17:40:13 发布

D调的绿叶

最新推荐文章于 2024-05-10 17:40:13 发布

阅读量876

点赞数

分类专栏： egret

本文链接：https://blog.csdn.net/vipzjh/article/details/54375565

版权

egret 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这一套学习目标
1、了解引用js库，js类的的创建，引用
2、把基本的圆形，方形封装的js库中。然后进行使用，最后是希望自己能封装一个扑克牌图形库
好了，先对我的开篇的代码进行改进

首页为index.html

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>这个是扑克游戏制作过程</title>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body>
<script src="js/startGame.js"></script>
</body>
</html>

入口就是startGame.js。

var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
canvas.width=512;
canvas.height=480;
document.body.appendChild(canvas);
//上面步骤是关键的，下面随便画个图
ctx.lineWidth = 5;                              //选择画笔
ctx.strokeStyle = "red";                        //选择颜料
ctx.moveTo(10,10);                              //...
ctx.lineTo(150,50);                             //...
ctx.lineTo(10,50);                              //画出轮廓
ctx.stroke();

以上说明可以在startGame.js里进行画图了，但是并没有封装啊，下面要进行一个改进了。实现封装一个圆形，然后在startGame.js里建立对象的形式进行画图
所以在js文件夹下新建一个yuanxingClass.js。
然后在index.html添加`：

<script src="js/yuanxingClass.js"></script>

yuanxingClass.js的代码是这样的：

class Yuanxing{

    constructor(sx,sy,rad,fillStyle){
        this.sx=sx;
        this.sy=sy;
        this.rad=rad;
        this.fillStyle=fillStyle;
        }
    draw(){

ctx.fillStyle=this.fillStyle;
ctx.beginPath();
ctx.arc(this.sx,this.sy,this.rad,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
    }
}

圆形的类就创建好了。在startGame.js使用了，现在startGame.js编程这样了。

var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
canvas.width=512;
canvas.height=480;
document.body.appendChild(canvas);
var yx=new Yuanxing(100,100,30,"rgb(0,255,0)");
yx.draw();

其实就是new一下就可以了。
然后就想了，我还想实现一下这个功能，就是小圆从x=100的位置移动到x=200的位置，于是我就这样做了。

..//前面省略
var yx=new Yuanxing(100,100,30,"rgb(0,255,0)");
yx.draw();
yx.sx=200;
alert(yx.sx);
yx.draw();

那么问题就来了。问题一、移动是瞬间移动到200位置的
问题二、起始的那个小圆还存在，没有消除掉

所以想要动态的玩，还需要加强代码，增加时间以及渲染的步骤。

D调的绿叶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5游戏之js图形封装使用01

这一套学习目标 1、了解引用js库，js类的的创建，引用 2、把基本的圆形，方形封装的js库中。然后进行使用，最后是希望自己能封装一个扑克牌图形库好了，先对我的开篇的代码进行改进首页为index.htmlhtml>head>meta http-equiv="content-type" content="text/html; charset=utf-8" />title>
复制链接

扫一扫

专栏目录