前言
HTML5新增的<canvas>元素，负责在页面中设定一个区域，之后可以通过JS脚本动态地绘图。相较于XML图像绘制，性能较高，但在放大后会出现失真。
提示：以下是本篇文章正文内容，下面案例可供参考
一、基本线条绘制
先讲讲绘图的基本结构：
- 在页面中需要先定义出
<canvas>对象，并且指定其宽高各占多少像素。 - 获取canvas对象及其画笔
myCanvas.getContext('2d') - 声明绘制的起止并指定需要经过的点
- 设置填充内容并填充
fill();&fillStyle; - 设置线条样式并执行绘画
lineWidth/lineCap...&ctx.stroke();
1.绘制线条
代码如下（示例）：
var canvas = document.querySelector("#canvas01");
var ctx = canvas.getContext('2d');
ctx.beginPath(); //声明开始绘制
ctx.moveTo(50,50);
ctx.lineTo(300,300);
ctx.closePath(); //声明结束绘制
ctx.fillStyle = "aquamarine"; //填充的颜色
ctx.fill();
ctx.lineWidth = 10; //线宽
ctx.lineCap = "round"; //起止点线条样式
ctx.lineJoin = "miter"; //线的拐角
ctx.miterLimit = 2; //裁剪角 1 2 3三个等级,3最尖
ctx.strokeStyle = "red";
ctx.stroke();
2.绘制圆
代码如下（示例）：
//起始位置,半径,从几度到几度,true是逆时针
ctx.arc(300,300,100,0,Math.PI,true);
ctx.fillStyle = "#02A6B5";
ctx.fill();
ctx.stroke();
二、弹幕和视频
1.弹幕
关于动画效果： 对于60HZ/S刷新率的显示器来说，16ms/帧的速度是最合适的 （1000 ms / 60 ≈ 16）。
代码如下（示例）：
//弹幕
var xAxis = 600;
setInterval(function(){
ctx.clearRect(0,0,600,600); //每次绘制前都要清空画布
xAxis -= 3;
if(xAxis < -100){
//100是字体的长度确定的
xAxis = 600;
}
ctx.fillText("hello word!",xAxis,100); //实体
ctx.strokeText("hello word!",xAxis,200); //镂空
},16);
2.视频
代码如下（示例）：
//绘制视频
var video = document.querySelector("#video"); //需要在页面中加入video标签
var intervalId;
video.onplay = function(){
document.getElementById("video").volume = 0.01; //调节音量（数据 0.0~1.0）
intervalId = setInterval(function(){
//获取间隔id用于暂停
ctx.clearRect(0,0,800,600); //去除黑色背景
ctx.fillRect(0,0,800,600); //设置黑色背景
ctx.drawImage(video,0,75,800,450); //设置视频大小，p1视频对象，p2 p3每帧图片左上角定位位置，p3 p4图片大小
},16);
}
video.onpause = function(){
clearInterval(intervalId);
}
三、图像与水印
1.图像+水印
注意的一点，必须要在图片加载完成之后再绘图。
代码如下（示例）：
//绘制图像
var img = new Image();
img.src = "img/lbx.png";
img.onload = function(){
//图片数据加载完毕后再显示图像
ctx.drawImage(img,10,10);
ctx.font = "50px 微软雅黑";
ctx.fillText("xiaoj",400,600);
}