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)
标签：canvas,01,浏览器,600,ctx,画布,100 From： https://www.cnblogs.com/zhulongxu/p/18187493