HTML5小游戏---爱心鱼（上）_技术笔记

GerhardzzZ 2019-10-09

beginPath,moveTo,lineTo, stroke,strokeStyle,lineWidth,lineCap,globalAlpha,closePath

截图
0赞 · 0采集
一只肥鹤 2018-11-05

图片显示很大很糊
正确：<canvas id="canvas1" width="700px" height="400px"></canvas>
错误：<canvas id="canvas2" style="width: 700px; height: 400px;"></canvas>
错误：#canvas1 { position: absolute; left: 300px; top: 100px; z-index: 0; width: 700px; height: 400px; }

在js中获取canvas的宽高：
正确：canWidth = can1.width;
错误：canWidth = can1.style.width;

0赞 · 0采集
94爱犯傻4053938 2017-02-01

在for循环前后加上两个API save(); 和 restore(); 这一对API是告诉画布，告诉场景，在这两个API之间的样式定义只在这两个API之间起作用。一旦出去这个restore呢，其他的样式还是会被恢复的，

0赞 · 0采集
java家洼 2016-06-23

问：为何用prototype扩充属性和方法，不直接在aneObj=function中定义呢？答：如果直接调用不能反复使用，把属性和方法放在原型中可以随时使用

0赞 · 0采集
java家洼 2016-06-22

这样子海葵就绘制完毕了，到浏览器中刷新一下，海葵已经出现了，但是数值上还需要调整一下 让它看起来更好看一点。线宽度改成20。刷新一下，再把它的间距调一下，间距是在这里的 this.x[i]=i*10+Math.random()*20;改成：this.x[i]=i*20+Math.random()*20;试一下， 到浏览器刷新一下，看起来可以了，是不是已经出去了(超出canvas的宽度了)。我们再 试一个值17，差不多，再试一下16，也是可以的，这样还是可以充满的(超出了canvas的宽) 试一下15，15又太小了，出现了一个间隙(海葵虽然离canvas的右边框有个空隙)，那么就用16 这样子看起来可以的，海葵这样子并不漂亮，之前调好的颜色#3b154e,把这个颜色赋值给 strokeStyle。另外我们希望它有一个透明度。看起来会非常的漂亮，那我们把它放到外面来 在for循环前后加上两个APIctx2.save();和ctx2.restore();这一对API是什么用处呢？ 意思就是告诉画布，告诉场景，在这两个API之间的样式定义只在这两个API之间起作用。 一旦出去这个restore呢，其他的样式还是会被恢复的，

0赞 · 0采集
java家洼 2016-06-22

for(var i=0;i<this.num;i++){ //首先告诉ctx2要开始绘制一个路径了。 ctx2.beginPath(); /* 然后要去到一个位置，那这个绘制的起始位置在哪里呢？这个最底下，对于一个海葵来说，最底下这个点，它的x坐标，就是它自身定义的x坐标。它的高度就是它定义的自己的独特的高度。它顶上的x值和底下的x值是一样的，moveTo的第一个参数x值是this.x[i]，第二个参数y值是：整个canvas的高度。因为它的x轴是向下为正，我们之前获取过canvas的高度canHeight ctx2.moveTo(this.x[i],canHeight)意思是场景ctx2到达了起始点。 */ ctx2.moveTo(this.x[i],canHeight) /* 那要绘制的线段的路径是到哪里呢？lineTo。x轴坐标仍然是this.x[i],y轴坐标就是 canHeight-this.len[i]。 */ ctx2.lineTo(this.x[i],canHeight-this.len[i]); /* 另外我们还需要定义一个线宽度lineWidth，告诉它海葵宽度是多少。 ctx2.lineWidth=20; 在线段结束的时候，我们要告诉它结束的样式。round圆点型。 ctx2.lineCap="round"; lineTo完了之后呢？我们开始给它一个样式。我们要首先给它一个样式，然后stroke 这里要注意：strokeStyle要定义在stroke()之前。这样才能绘制的上去。也就是说你首先告诉它刷什么颜色，然后拿起刷子stroke，把它刷上去。 ctx2.strokeStyle="#3b154e"; */ ctx2.stroke(); } ctx2.restore();

0赞 · 0采集
java家洼 2016-06-22

aneObj.prototype.draw=function(){ ctx2.save(); /* 我们把globalAlpha定义在这里。给值0.6，到浏览器中看一下。ok，看起来还可以。这样我们海葵就绘制好了。那我们再看一下我们的代码。我们在绘制海葵的时候做了一个循环，做了 50次循环，这个num值还是非常大的，50次循环，这些for循环里的命令都要执行，那么我们再看一下，除了一些对每一个海葵，对它自己来说，个性化的命令，比如说哪一个点moveTo，要绘制啊stroke等等，除了这些以外，其中呢，这一部分： ctx2.lineWidth=20; ctx2.lineCap="round"; ctx2.strokeStyle="#3b154e"; 我们把它放到外面来，就是不需要在每一次绘制的时候每一个海葵都要去定义它，就跟globalAlpha一样，对每一个海葵都是一样的，我们来刷新一下看一下。仍然是跟之前一样的效果。现在我们代码会更简洁一点。OK。好。 */ ctx2.globalAlpha=0.6; ctx2.lineWidth=20; ctx2.lineCap="round"; ctx2.strokeStyle="#3b154e"; for(var i=0;i<this.num;i++){ //首先告诉ctx2要开始绘制一个路径了。 ctx2.beginPath();

0赞 · 0采集
java家洼 2016-06-22

5，我们怎么样来绘制海葵？也就是draw方法该怎么写 /* 你要绘制，这个draw也要放到循环gameloop里面，希望每一帧都会去绘制海葵。我们怎么样来绘制海葵？绘制海葵的时候就是要把每一条线画出来。前面我们已经介绍了那些API，我们将会用beginPath，首先告诉场景，我们要开始一个路径，路径开始之后要告诉它一个起始点， moveTo到达某一个点，lineTo是指路径从这个起始点到另外一个点，到这个点之后呢就出现了一个线段，我们需要把这个线段绘制一下stroke，给它一个颜色，给它颜色用strokeStyle，另外绘制的海葵要有一定的宽度，也就是我们在绘制图这个颜色的时候，线段是有宽度的lineWidth。另外在这个线段结尾的时候，会有一个样式lineCap，另外我们还会用到另外一个API————globalAlpha，这个是干嘛的呢？这个是给我们绘制的物体一定的透明度。Alpha就是透明度的意思。 globalAlpha就是全局透明度。那我们先来绘制一个海葵。在循环里面，绘制一个海葵， */ aneObj.prototype.draw=function(){

0赞 · 0采集
java家洼 2016-06-22

2. 在main.js的前面定义一个变量var ane; 在main.js的init方法中： //我们把ane定义为aneObj类型。并且把它初始化一下， ane=new aneObj(); ane.init(); 3.然后把ane.js这个脚本引入到 html中。好，我们来测试一下吧。看这个init有没有执行，我们要养成经常习惯，否则bug嵌入太深，到后面找起来非常麻烦，在ane.js脚本里的aneObj类的init方法里加入console.log("a");这句代码，在浏览器中刷新，在console选项卡中看到有a。 aneObj.prototype.init=function(){ for(var i=0;i<this.num;i++){ this.x[i]=i*10+Math.random()*20; this.len[i]=200+Math.random()*50; } console.log("a"); } 4， /* 这个draw也要放到循环gameloop里面，希望每一帧都会去绘制海葵。大家想一下，海葵不需要动画，它看起来是一个死的，固定的一个，它不需要每一帧都去刷新的是吧。这个我们后面再说。我们先不管它。 */ ane.draw();

0赞 · 0采集
java家洼 2016-06-22

/* 初始化，初始化的时候做什么工作呢？确定每一个海葵的位置，我们先来想一下这个海葵该怎么画吧？画一个海葵的原理就是画一条线，从顶端画下来，或者从底端画上去，那我们从底端画上去吧。也就是说beginPath在底端，先把moveTo到底端的这个点，然后取一个长度，然后画上来，到这里结束。结束之后呢我们把这条线绘制一下，ok，那这样呢，我们不一定要知道它的y值，我们需要它的一个高度len。然后做一个循环：把每一个海葵都初始化一下，this.x[i]= 我们给它随机初始化一个位置，我们让海葵每隔一段距离就长一个海葵，我们要它看起来比较随机一点，给它一个随机值，Math.random() 返回的是0到1之间的一个值[0,1)，并且1是开区间，不包括1，但是包括0，给它乘上一个20,暂且先这样等会我们再回过头来调整，然后我们给海葵的高度一个随机值。高度定义一个基准，200，再加上一个随机调整，乘以50 这样海葵这个类基本的东西就定义好了。那我们回到main.js中，我们刚才只是定义了一个类，但是我们的对象还没有创建， */ aneObj.prototype.init=function(){ for(var i=0;i<this.num;i++){ this.x[i]=i*10+Math.random()*20; this.len[i]=200+Math.random()*50; } } //你要绘制 aneObj.prototype.draw=function(){ }

0赞 · 0采集
java家洼 2016-06-22

好，看完这些API呢，我们就来绘制海葵了。我们绘制的海葵是一个摆动的动画，在前面我们讲到这个课程分两个阶段，我们在第二个阶段再做海葵的动画，第一阶段呢，仅仅绘制一个静态的海葵。绘制一条笔直的直线，这个就非常简单了。我们就绘制一条直线来描绘一下这个路径，然后给它一个颜色，那么这么多海葵，我们如何来画？我们定义一个类，类里面呢，设置一个数组，海葵的数组，每一条海葵都是数组的成员，那这个数组，除了海葵的属性，包括海葵的位置，这些信息，包括x值，y值等等，我们先建立一个新的文件，Ctrl+N，Ctrl+S 我们把不同的内容放在不同的脚本里面会比较清晰，ane.js ane是海葵的英文的前面三个字母。 1.我们先来定义一个海葵对象的类，我们先来定义海葵对象的一个类，aneObj，海葵对象是一个function,这个对象里面有很多的海葵，海葵有哪些属性呢？我们把这些属性定义为数组类型，它们有一个x值，等于一个数组，它的高度len等于一个数组。我们想一下还有哪些属性，我们先把想到的写出来。 //它的数量有多少个，我们先定义50个吧。有50条海葵 aneObj.prototype.num=50;

0赞 · 0采集
Oooooooh 2016-03-20

ane.js

截图
0赞 · 0采集
qqwww 2016-02-24

海葵2

截图
0赞 · 0采集
qqwww 2016-02-24

海葵1

截图
0赞 · 0采集
GoogleLens 2016-01-11

当前代码块的样式有效ctx.save() ctx.restore(); ctx.beginPath(); ctx.stroke();生效

截图
0赞 · 0采集
sofa 2015-12-23

建立对象，注意空格

0赞 · 0采集
sofa 2015-12-23

效果出不来说是对象没定义，没看明白，检查了一下，已经定义了呀，new

1赞 · 4采集
名字太难听_不改行不行 2015-11-11

Math.random（）是0到1随机的一个值

0赞 · 0采集
小蜗牛wj 2015-10-05

绘制直线的API

截图
0赞 · 0采集

数据加载中...