Canvas基础

1、canvas简介

（1）canvas是HTML5标签，表示画布，canvas只是作为图像绘制的容器，所有的绘制工作都在脚本JavaScript内部完成。

（2）canvas的作用：①绘制基础图形；②绘制文字；③图形变形和图片合成；④处理图片和视频；⑤动画实现；⑥制作小游戏。

（3）支持canvas的浏览器：Firefox, safari, chrome, opera, IE9等。

2、canvas实战

（1） 查看当前浏览器是否支持canvas

可以在canvas标签内书写提示内容，若当前浏览器不支持canvas，则显示提示内容。

<canvas id="myCanvas" height="900" width="900">您的浏览器过低，请更换高版本再试</canvas>

（2）修改画布

canvas画布是一个矩形区域，里面的每一个像素都可以被控制。应在canvas标签内设置width和height属性，不要在css里设置，避免以后canvas画出的图像变形。

（3）获取绘制环境

var myCanvas=document.getElementById('myCanvas');//获取画布id
    var ctx=myCanvas.getContext('2d');

getContext()方法返回一个用于在画布上绘图的环境。此处语法：myCanvas.getContext('2d')，参数2d指定了你想要在画布上绘制的类型，当前唯一的合法值为"2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图API。

3、方法：

方法	说明
beginPath()	开始定义路径
closePath()	关闭前面定义的路径
moveTo(float x, float y)	把canvas的当前路径的结束点移动到x, y对应的点
lineTo(float x, float y)	把canvas的当前路径从当前结束点连接到x, y对应的点
fill()	填充canvas当前路径
stroke()	填充canvas当前路径绘制边框
fillStyle()	设置填充canvas路径所使用的填充风格
strokeStyle()	设置绘制canvas路径的填充风格
lineWidth()	设置笔触线条的宽度

4、绘制图形

（1）直线

//直线
ctx.beginPath();
ctx.moveTo(700,50);
ctx.lineTo(900,50);
ctx.closePath();
ctx.lineWidth=2;
ctx.strokeStyle='blue';//边框颜色，若不设置则默认黑色
ctx.stroke();//描边

（2）三角形

//三角形
    ctx.beginPath();
    ctx.moveTo(500,50);
    ctx.lineTo(600,150);
    ctx.lineTo(400,150);
    ctx.closePath();//绘制线条以返回开始点
    ctx.lineWidth=10;
    ctx.strokeStyle='lightgreen';
    ctx.stroke();

（3）正方形

//手绘正方形
    ctx.beginPath();
    ctx.moveTo(200,50);
    ctx.lineTo(300,50);
    ctx.lineTo(300,150);
    ctx.lineTo(200,150);
    ctx.lineTo(200,50);
    ctx.fill()//填充

（4）圆和半圆

    //圆形
    ctx.beginPath();
    ctx.arc(250,250,50,0,2*Math.PI);//圆形，弧，参数：中心点x,中心点y,半径r,起始弧度和结束弧度,false顺时针,true逆时针
    ctx.fill()
    //半圆
    ctx.beginPath();
    ctx.arc(100,250,50,0,Math.PI);//圆形，弧，参数：中心点x,中心点y,半径r,起始弧度和结束弧度,false顺时针,true逆时针
    ctx.fill()

（5）文字（分别对其填充和描边，二者混合）

   //文字
    ctx.beginPath();
    ctx.font='40px 微软雅黑';
    ctx.fillText('Hello,Canvas!',50,350)
    ctx.beginPath();
    ctx.lineWidth=2;
    ctx.strokeText('Hello,Canvas!',350,350)

    //颜色与描边混合文字
    ctx.beginPath();
    ctx.font='40px 微软雅黑';
    ctx.fillText('Hello,Canvas!',650,350)
    ctx.beginPath();
    ctx.lineWidth=1;
    ctx.strokeText('Hello,Canvas!',650,350)

（6）添加阴影效果

    ctx.shadowColor='yellow';
    ctx.shadowOffsetX=10;
    ctx.shadowOffsetY=10;
    ctx.shadowBlur=2;//模糊级数