html5中的canvas还记得吗(2,反复横跳的矩形),前端基础

语言: CN / TW / HK

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第21天,点击查看活动详情

前言

上次内容带小伙伴重温了下canvas的概念以及注意的地方,这次就开始讲js控制画布,开始画画了,重头戏来了喔。

绘制图像

canvas元素本身是没有绘图能力的。所以画图都是在js中完成的。 ```html

``` - 首先通过id获取canvas的元素

js var myCanvas=document.getElementById("myCanvas"); - 创建 context 对象,getContext("2d")方法是的HTML5内部的,它返回一个对象,里面有绘制路径、矩形、圆形、字符以及添加图像的方法。可以理解是我们的画笔。

js var ctx=myCanvas.getContext("2d");

image.png - 简单的矩形

js // 填充颜色 ctx.fillStyle="#fcb4b4"; // 参数,x,y坐标,宽高 ctx.fillRect(0,0,300,200); 我们为了视觉看的更清晰一点,一般可以给canvas元素设置样式边框,这样我们就知道画布的大小和位置了 ```css

myCanvas{

border: 1px solid #000;

} ``` 通过添加样式,我们可以看出画布是很明显了。那么得到效果就是如下了

image.png

其实敲代码也没那么复杂的,搞清楚想要什么样的效果就好了,是不是很简单。 - 动起来 通过定时器,一段时间后修改矩形的坐标 js var x =0,y=0 setInterval(()=>{ ctx.fillRect(x++,y++,300,200); },50) 但是效果不尽如意,因为每次调整坐标后没有清除画布,所以之前的矩形依然残留在画布上 image.png

那么清除画布的方法clearRect就该出场了,它也接受四个参数,分别是x,y坐标,w,h宽高。这样效果就好很多了。 js var x =0,y=0 setInterval(()=>{ // 顺序别搞反了,先清除,再画 ctx.clearRect(0,0,500,500); ctx.fillRect(x++,y++,300,200); },50) 像让它动起来是不难的,难得是我们控制它如何动,所以我们通过几个变量,比如宽高,速度啥的,来控制不出画布,总是在画布内运动。重新修改了下代码,canvas的宽高,我们用变量来表示,为的就是后面好动态判断。 ```js var x =0,y=0,w=300,h=200,xd=2,yd=2; // 参数,x,y坐标,宽高 ctx.fillRect(0,0,w,h); setInterval(()=>{ if((x+w)>=500){ xd=-1 }else if(x<0){ xd=Math.abs(xd) } x+=xd if((y+h)>=500){ yd=-1 }else if(y<0){ yd=Math.abs(yd) }

  y+=yd
  // 顺序别搞反了,先清除,再画
  ctx.clearRect(0,0,500,500);
  ctx.fillRect(x,y,w,h);
},50)

``` 我也不知道为啥我的动图会有这样的效果,反正正常浏览器是没问题的。

GIF 2022-6-30 下午 12-56-04.gif 通过我们的一步一步的优化,最后的运行效果就很好看了,是不是很像小时候看电视没信号时候的画面,反复横跳。是不是挺好玩的

总结

本次内容讲到了js控制画笔,在画布上画矩形,再通过简单的js判断,就实现了动起来的canvas效果,很简单,以后再加上复杂的运算,就能制作更多更好玩的游戏出来,这次只是简单了解了下js控制画笔,后续能讲的话,还是会完善的。

好啦,本节内容就总结到这里。我的文章都是学习过程中的总结,希望能够和小伙伴们共同进步共同学习,如果发现错误,也欢迎留言指出,我及时更正。