本文共 2451 字，大约阅读时间需要 8 分钟。
在上一篇文章中, 我们基于DOM体系构建了超级玛丽, 那么在本篇文章中我们使用canvas对整个架构进行升级, 从而提升游戏的视觉体验。 有需要的同学可以查看 源码 学习.
线上体验地址
考虑到有些同学对canvas不是很熟悉。本文将会对canvas的一些基础做一些大致的讲解。
canvas基础知识
画布元素 canvas标签可以让我们能够使用JavaScript在网页上绘制各种样式的图形。要访问实际的绘图接口, 首先我们需要创建一个上下文(context), 它是一个对象, 提供了绘图的接口。目前有两种广受绘图的样式: 用于二维图形的”2d“以及通过 OpenGL 接口的三维图形的 webgl 。比如, 我们可以使用 <canvas /> DOM元素上的 getContext 方法创建上下文。
1
2 3 4 5 6 7 8 9 <body> <canvas width="500" height="500" /> </body> <script> let canvas = document.querySelector('canvas'); let context = canvas.getContext('2d'); context.fillStyle = "yellow"; context.fillRect(10, 10, 400, 400); </script> 我们绘制了一个宽度和高度都为400像素的黄色正方形, 并且其左上角顶点处的坐标为(10, 10)。canvas的坐标系(0, 0)在其左上角.边框的绘制
在画布的接口中, fillRect 方法用于填充矩形。 fillStyle 用于控制填充形状的方法。比如单色
1
context.fillStyle = "yellow"; 渐变色1
2 3 4 5 6 7 let canvas = document.querySelector('canvas'); let context = canvas.getContext('2d'); let grd = context.createLinearGradient(0,0,170,0); grd.addColorStop(0,"black"); grd.addColorStop(1,"red"); context.fillStyle = grd; context.fillRect(10, 10, 400, 400); pattern图案对象1
2 3 4 5 6 7 8 9 let canvas = document.querySelector('canvas'); let context = canvas.getContext('2d'); let img = document.createElement('img'); img.src = "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3112798566,2640650199&fm=26&gp=0.jpg"; img.onload = () => { let pattern = context.createPattern(img, 'no-repeat'); context.fillStyle = pattern; context.fillRect(10,10,400,400) } strokeStyle属性与fillStyle属性类似, 但是 strokeStyle 作用与描边线的颜色。线条的宽度由 lineWidth 属性决定。比如我想绘制一个边框宽度为6的黄色正方形。
1
2 3 4 5 let canvas = document.querySelector('canvas'); let context = canvas.getContext('2d'); context.strokeStyle = "yellow"; context.lineWidth = 6; context.strokeRect(10,10, 400, 400); 路径 路径是很多线条的组合。如果想要绘制各种各样的形状,我们会频繁用到 moveTo 和 lineTo 两个函数。1
2 3 4 5 6 7 8 9 let canvas = document.querySelector('canvas'); let context = canvas.getContext('2d'); context.beginPath(); for (let index = 0; index < 400; index+=10) { context.moveTo(10, index); context.moveTo(index, 0); context.lineTo(390, index); } context.stroke(); moveTo 表示我们当前画笔起点的位置, lineTo 表示我们画笔从起点到终点的连线。以上代码执行后就是如下所示:当然我们可以为线条绘制的图形进行填充。
1
2 3 4 5 6 7 8 let canvas = document.querySelector('canvas'); let context = canvas.getContext('2d'); context.beginPath(); context.moveTo(50, 10); context.lineTo(10, 70); context.lineTo(90, 70); context.fill(); context.closePath(); 绘制图片 在计算机图形学中, 通常需要对矢量图形和位图图形进行区分。 矢量图形是指: 通过给出形状的逻辑来描述指定的图片。而位图图形是指使用像素数据, 而不指定实际形状。转载地址：http://jxevb.baihongyu.com/