很早就知道这个东西了，一直很想学习，趁着清明小假期，终于有时间来学一下它了！
注意canvas 的 width 和 height 不要用 css 来设定，如果用 css 样式来设置，会变形和失真
<canvas width="500" height="500">
当前浏览器版本不支持，请升级浏览器
</canvas>
ie 678不支持
<script>
//获取画布
var canvas = document.getElementById('myCanvas');
//得到画布的上下文
var ctx = canvas.getContext('2d');
//设置颜色
ctx.fillStyle = 'red';
//绘制图形
ctx.fillRect(100,100,200,50);//前两个表示，x，y的坐标，后两个是宽高
</script>
一定要先设置颜色，再绘制图形
用canvas绘制一个图形，一旦绘制成功，canvas就像素化他们。canvas没有能力，从画布上再次得到这个图形，也就是不能修改画布内容，这也是轻量化的原因
实现动画效果需要经历
也就是需要重新绘制
实现一个盒子滑动的效果
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'skyblue';
//信号量
var left = 0;
//动画过程
setInterval(function() {
//清屏
ctx.clearRect(0,0,500,500);
//距离画布左侧距离增加
left++;
//重新绘制
ctx.fillRect(left,100,100,100);
})
</script>
每一次的更新重绘的画面叫做一帧
用面向对象的方式来维持canvas需要的属性和状态
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
//构造函数
function Rect(x, y, w, h, color) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.color = color;
}
//给函数原型添加方法
Rect.prototype.update = function () {
this.x++;
}
Rect.prototype.render = function () {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.w, this.h);
}
//实例化
var r1 = new Rect(100, 100, 50, 50, 'skyblue');
var r2 = new Rect(100, 200, 50, 50, 'pink');
setInterval(function () {
//清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
r1.update(); //更新
r1.render(); //重绘
r2.update(); //更新
r2.render(); //重绘
})
</script>
//设置颜色
ctx.fillStyle = 'red';
//绘制图形
ctx.fillRect(100,100,200,50); //前两个表示，x，y的坐标，后两个是宽高
ctx.strokeStyle = 'red'; //边框颜色
ctx.strokeRect(300,100,100,100); //边框大小
需要设置路径的起点
使用绘制命令画出路径
封闭路径
填充或者绘制已经封闭路径的形状
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
//创建一个路径
ctx.beginPath();
//移动位置点 起始点
ctx.moveTo(100,100);
// 描述行进路径
ctx.lineTo(200,200);
ctx.lineTo(400,180);
// 封闭路径
ctx.closePath();
// 绘制图形
ctx.strokeStyle = 'red';
ctx.stroke();//画线
</script>
stroke()通过线条来绘制图形轮廓。strokeRect是绘制矩形，要传参,描边
fill()通过填充路径的内容区域生成实心的图形。填充
在绘制路径的时候可以不关闭路径（不设置closePath()），这个时候会实现自封闭现象（只针对fill功能）
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
//创建一个路径
ctx.beginPath();
//描绘路径
ctx.arc(200, 200, 50, 0, 2 * Math.PI, false);//默认为false，顺时针
//画路径
ctx.stroke();
</script>
这里的意思是顺时针绘制一个圆心坐标（200，200）半径为50，弧度为2PI的圆
通过给原型添加方法来给实例对象添加方法，使得个所有实例化构造出来的对象出生就带上这些方法
实现步骤
ctx.globalAlpha = 0.4;
利用lineWidth设置线的粗细，属性值必须是数字，默认是1.0,没有单位
ctx.lineWidth = 10;//设置线的粗细
lineCap属性决定了线段末端的属性,3个值butt,round,square
lineJoin属性决定了图形中两段链接处所显示的样子round,bevel(平角）,miter(默认)
setLineDash定义虚线样式，接收一个数组
ctx.setLineDash([10, 20]);
第一个参数是虚线的宽度，第二个参数是两个虚线之间的距离，以此类推，即虚线的交替状态
lineDashOffset可以来设置虚线的起始偏移量
lineDashOffset = 10;//虚线起始偏移亮，就是拿个虚线小格移多少
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.font = '30px 宋体';
ctx.textAlign = 'center';//对齐方式基于fillText的x值
ctx.fillText('我是ljc', 100, 100);//文本内容和文本的位置
线性渐变
ctx.createLinearGradient(x0, y0, x1, y1);//前两个参数是起始位置，后两个是结束位置
var linear = ctx.createLinearGradient(10,10,200,100);//渐变颜色
linear.addColorStop(0,'red');
linear.addColorStop(0.5,'blue');
linear.addColorStop(1,'skyblue');//渐变位置和颜色
ctx.fillStyle = linear;//给颜色
ctx.fillRect(10,10,200,100);
径向渐变
ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);//开始圆形的x,y,r和结束的x,y,r
用法和线性渐变相同
设置文字阴影效果
ctx.shadowOffsetX = 10;//阴影左右偏离的距离
ctx.shadowOffsetY = 10;//阴影上下偏离的距离
ctx.shadowBlur = 2;//模糊值
ctx.shadowColor
