HTML5于2010年发布，具有新的媒体功能，可取代Flash。 在此更新中，引入了canvas元素，以在JavaScript上使用动态图形，视频游戏，动画和交互式视频等应用程序在浏览器上生成图形。
什么时候应该使用帆布？ 如果您的应用程序依赖于图形，并且需要在移动设备（Android和iOS）以及现代台式计算机（已更新为最新的浏览器版本）上进行查看，那么使用canvas元素是一个不错的选择。 请记住，对于不支持该功能的旧版浏览器，您可以使用后备选项。
但是，对于所有内容都使用画布不是一个好主意。 如果要创建需要可访问性和可用性的网站，则应遵循HTML良好做法。
Javascript是当今使用最广泛的编程语言之一。 它对于Web应用程序是必不可少的，并且随着Node JS的最新发展，它也可以用于台式机和其他设备。
要开始使用Javascript进行编码，您需要的是Web浏览器和文本编辑器。
本教程分为7章，提供示例代码和注释。
首先创建一个名为“ filename.html”的文件，编写代码并在浏览器中打开。
目录：
– 你好，世界
–形状
–转型
–雪碧
–瓷砖图
–模式
–蓝色滤镜
画布-Hello World
/ *使画布居中并设置边框* /
画布{
显示：块；
保证金：0自动;
边框：1px纯黑色；
}
不支持的画布。
var canvas1 = document.getElementById（'canvas1'）; //将canvas元素保存在变量中
var ctx = canvas1.getContext（'2d'）; //将canvas上下文保存在变量中
//设置画布大小
var w = 800;
var h = 600;
canvas1.width = w;
canvas1.height = h; ctx.font =“ 30px Arial”; //设置字体
ctx.fillText（“ Hello World”，10,50）; //在x = 10和y = 50处绘制文本
var canvas1 = document.getElementById（'canvas1'）; //将canvas元素保存在变量中
var ctx = canvas1.getContext（'2d'）; //将canvas上下文保存在变量中
//设置画布大小
canvas1.width = 800;
canvas1.height = 600; //画一个红色圆圈
ctx.fillStyle =“＃e25353”;
ctx.arc（75,75,50,0,2 * Math.PI）;
ctx.fill（）; //画一个蓝色正方形
ctx.fillStyle =“＃2f6daf”;
ctx.fillRect（150，25，100，100）; //绘制蓝色正方形的轮廓
ctx.lineWidth = 2;
ctx.strokeStyle =“＃2f6daf”;
ctx.strokeRect（275，25，100，100）; //画一个小方块
ctx.fillStyle =“＃2f6daf”;
ctx.fillRect（400，25，10，10）; //画一条黑线
ctx.lineWidth = 2;
ctx.strokeStyle =“＃000000”;
ctx.beginPath（）;
ctx.moveTo（425，25）;
ctx.lineTo（525，125）;
ctx.stroke（）;
var canvas1 = document.getElementById（'canvas1'）; //将canvas元素保存在变量中
var ctx = canvas1.getContext（'2d'）; //将画布上下文保存到变量中//设置画布大小
var w = 800;
var h = 600;
canvas1.width = w;
canvas1.height = h; //在45度处绘制一个蓝色正方形
ctx.save（）;
ctx.rotate（45 * Math.PI / 180）;
ctx.fillStyle =“＃2f6daf”;
ctx.fillRect（150，25，100，100）;
ctx.restore（）; //在屏幕中央以两倍大小绘制一个蓝色正方形
ctx.save（）;
ctx.translate（w / 2，h / 2）;
ctx.scale（2，2）;
ctx.fillStyle =“＃2f6daf”;
ctx.fillRect（-50，-50，100，100）;
ctx.restore（）;
var canvas1 = document.getElementById（'canvas1'）; //将canvas元素保存在变量中
var ctx = canvas1.getContext（'2d'）; //将画布上下文保存在变量中//设置画布大小
var w = 800;
var h = 600;
canvas1.width = w;
canvas1.height = h; //用硬币图像创建一个精灵
var coin = new Sprite（“ https://i.imgur.com/tVCEsMS.png”，10，10，1000，100）;
coin.totalFrames = 10;
coin.ticksPerFrame = 5; 环（）; //启动主循环功能loop（）{
ctx.clearRect（0，0，w，h）; //清除画布coin.update（）; //更新帧数
coin.render（）; //渲染精灵
window.requestAnimationFrame（loop）; //重复主循环
}
函数Sprite（img，x，y，w，h）{
var self = this;
self.x = x;
self.y = y;
self.w = w;
self.h = h;
self.frameIndex = 0;
self.tickCount = 0;
self.ticksPerFrame = 0;
self.totalFrames = 1;
self.image = null;
self.loop = true; self.render = function（）{
如果（self.image！= null）{
ctx.drawImage（
自我形象
self.frameIndex * self.w / self.totalFrames，
0，
self.w / self.totalFrames，
自我
self.x，
自我
self.w / self.totalFrames，
self.h）;
}
} self.load = function（）{
var image = new Image（）;
image.src = img;
self.image =图片；
} self.update = function（）{
self.tickCount + = 1;
如果（self.tickCount> self.ticksPerFrame）{
self.tickCount = 0;
如果（self.frameIndex <self.totalFrames-1）{
self.frameIndex + = 1;
}
否则，如果（self.loop）{
self.frameIndex = 0;
}
}
}
self.load（）;
}
var canvas1 = document.getElementById（'canvas1'）; //将canvas元素保存在变量中
var ctx = canvas1.getContext（'2d'）; //将画布上下文保存到变量中//设置画布大小
var w = 800;
var h = 600;
canvas1.width = w;
canvas1.height = h; var grass = new Sprite（“ https://i.imgur.com/Lac2YXW.png”，10，10，100，100）;
var dirt = new Sprite（“ https://i.imgur.com/EYzNltE.png”，10，10，100，100）;
var tile = []; var tilemap = [
[0,1,1,1,1,1,1,1，]
[0,1,1,1,1,1,1,1，]
[0,1,1,0,0,0,1,1]，
[0,1,1,0,0,0,1,1]，
[0,1,1,0,0,0,1,1]，
[0,1,1,0,0,0,1,1]，
];用于（在tilemap中的y）{
为（在tilemap [y]中的var x）{
var id = tilemap [y] [x]; 如果（id == 0）{
var tile = new Tile（grass，x * 100，y * 100，100，100）;
tile.push（tile）;
}
否则（id == 1）{
var tile = new Tile（dirt，x * 100，y * 100，100，100）;
tile.push（tile）;
}
}
} loop（）;函数loop（）{
ctx.clearRect（0，0，w，h）; //清除（var i in tile）{
var tile = tile [i];
tile.render（）;
}
window.requestAnimationFrame（loop）; //重复主循环
}函数Tile（sprite，x，y，w，h）{
var self = this;
self.sprite =精灵；
self.x = x;
self.y = y;
self.w = w;
self.h = h; self.render = function（）{
ctx.drawImage（
自我形象
0，
0，
自我
自我
self.x，
自我
自我
自我
）;
}
}函数Sprite（img，x，y，w，h）{
var self = this;
self.x = x;
self.y = y;
self.w = w;
self.h = h;
self.frameIndex = 0;
self.tickCount = 0;
self.ticksPerFrame = 5;
self.frameCount = 1;
self.image = null;
self.loop = true; self.render = function（）{
如果（self.image！= null）{
ctx.drawImage（
自我形象
self.frameIndex * self.w / self.frameCount，
0，
self.w / self.frameCount，
自我
self.x，
自我
self.w / self.frameCount，
self.h）;
}
} self.load = function（）{
var image = new Image（）;
image.src = img;
self.image =图片；
} self.update = function（）{
self.tickCount + = 1;
如果（self.tickCount> self.ticksPerFrame）{
self.tickCount = 0;
如果（self.frameIndex <self.frameCount-1）{
self.frameIndex + = 1;
}
否则，如果（self.loop）{
self.frameIndex = 0;
}
}
}
self.load（）;
}
var canvas1 = document.getElementById（'canvas1'）; //将canvas元素保存在变量中
var ctx = canvas1.getContext（'2d'）; //将canvas上下文保存在变量中
//设置画布大小
var w = 800;
var h = 600;
canvas1.width = w;
canvas1.height = h; var img = new Image（）; //创建图片元素
img.onload = function（）{
//加载图片后绘制图案
var pattern = ctx.createPattern（img，“ repeat”）;
ctx.fillStyle =模式；
ctx.fillRect（0,0，w，h）;
}
img.src =“ https://i.imgur.com/64y9SEC.jpg”; //设置图片来源路径
var canvas1 = document.getElementById（'canvas1'）; //将canvas元素保存在变量中
var ctx = canvas1.getContext（'2d'）; //将canvas上下文保存在变量中
//设置画布大小
var w = 800;
var h = 600;
canvas1.width = w;
canvas1.height = h; var img = new Image（）; //创建图片元素
img.onload = function（）{
ctx.drawImage（img，0，0，img.width，img.height）; //绘制图像/ *使用“色相”复合操作绘制一个蓝色矩形* /
ctx.globalCompositeOperation =“色相”;
ctx.fillStyle =“＃2f6daf”;
ctx.fillRect（0,0，img.width，img.height）;
}
img.src =“ https://i.imgur.com/oTxjJDT.jpg”; //设置图片来源路径
