画布canvas基础 01
1. 什么是canvas
canvas是用来绘制图形的.它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
<canvas width="500" height="500">
当前的浏览器版本不支持，请升级浏览器
</canvas>
判断浏览器是否支持 画布 cnavas
canvas的标签属性只有两个，width和height，表示的是canvas画布的宽度和高度，不要用css来设置，而是用属性来设置，画布会失真变形。
标签的innerContent是用来提示低版本浏览器（IE6、7、8）并不能正常使用canvas，高版本的浏览器是看不到canvas标签内部的文字的。
上下问 -- 2d的上下文和3d的上下文
// 得到画布的上下文，上下文有两个，2d的上下文和3d的上下文 // 所有的图像绘制都是通过ctx属性或者是方法进行设置的，和canvas标签没有关系了 const ctx = myCanvas.getContext("2d") if(ctx !== null) { // 设置颜色 ctx.fillStyle = 'green' // 绘制矩形 ctx.fillRect(100, 100, 200, 50) }
绘制一个天空蓝的矩形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <canvas id="context" width="500" height="600">当前的浏览器版本不支持，请升级浏览器</canvas> <script > const dom = document.querySelector("#context"); // console.log(dom.getContext); if(!dom.getContext) { alert("当前浏览器不支持") } const ctx = dom.getContext("2d"); // 获取2D上下文 if(ctx != null) { ctx.fillStyle = "skyblue"; // 设置颜色 // 绘制图形 ctx.fillRect(100,100,100,100); } </script> </body> </html>
通过上面的代码我们发下canvas本质上就是利用代码在浏览器的页面上进行画画，比如上面的代码fillRect就代表在页面中绘制矩形，一共四个属性，前两个100，100代表(x, y), 即填充起始位置，200代表宽，50代表高，单位都是px。
canvas轻量化和flash重量化的比较
轻量化的原因：不能修改了，只能重新清除所有内容，然后重新渲染。
我们用canvas绘制了一个图形，一旦绘制成功了，canvas就像素化了他们。canvas没有能力，从画布上再次得到这个图形，也就是我们没有能力去修改已经在画布上的内容，这个就是canvas比较轻量的原因，Flash重的原因之一就有它可以通过对应的api得到已经上“画布”的内容然后再次绘制
如果我们想要这个canvas图形移动，必须按照：清屏——更新——渲染的逻辑进行编程。总之，就是重新再画一次
canvas的动画思想
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <canvas id="context" width="500" height="600">当前的浏览器版本不支持，请升级浏览器</canvas> <script > const dom = document.querySelector("#context"); // console.log(dom.getContext); if(!dom.getContext) { alert("当前浏览器不支持") } const ctx = dom.getContext("2d"); // 获取2D上下文 if(ctx != null) { ctx.fillStyle = "skyblue"; // 设置颜色 // 绘制图形 let left = -200; setInterval(() => { // 清除画布,0,0代表从什么位置开始,600,600代表清除的宽度和高度 ctx.clearRect(0,0,600,600); // 清屏 // 更新信号量 left++ // 如果已经走出画布，则更新信号量为初始位置 if(left > 600) { left = -200 } ctx.fillRect(left, 100, 200, 200) },10) } </script> </body> </html>
实际上，动画的生成就是相关静态画面连续播放，这个就是动画的过程。我们把每一次绘制的静态话面叫做一帧，时间的间隔（定时器的间隔）就是表示的是帧的间隔。
使用面向对象的思维制作动画
// 得到画布 const myCanvas:HTMLCanvasElement = document.getElementById("main_canvas") as HTMLCanvasElement // 获取上下文 const ctx = myCanvas.getContext("2d") class Rect { // 维护状态 constructor( public x: number, public y: number, public w: number, public h: number, public color: string ) { } // 更新的方法 update() { this.x++ if(this.x > 600) { this.x = -200 } } // 渲染 render(ctx: CanvasRenderingContext2D) { // 设置颜色 ctx.fillStyle = this.color // 渲染 ctx.fillRect(this.x, this.y, this.w, this.h) } } // 实例化 let myRect1: Rect = new Rect(-100, 200, 100, 100, 'purple') let myRect2: Rect = new Rect(-100, 400, 100, 100, 'pink') // 动画过程 // 更新的办法 setInterval(() => { // 清除画布,0,0代表从什么位置开始,600,600代表清除的宽度和高度 if(ctx !== null) { // 清屏 ctx.clearRect(0,0,600,600) // 更新方法 myRect1.update() myRect2.update() // 渲染方法 myRect1.render(ctx) myRect2.render(ctx) } },10)
