三、初识Canvas---绘制文本/擦除canvas/使canvas填满浏览器窗口

1、绘制文本

context.fillText(文本名称，文本左下角x坐标，文本左下角y坐标)
除非有充分的理由不使用普通的HTML元素，否则一定不要在canvas中创建文本。
相反，应该使用普通的HTML元素创建文本，然后使用CSS定位到canvas之上。关键是使用HTML来处理文本内容，而使用canvas来处理像素和图形。

$(document).ready(function () {
            var canvas = $("#myCanvas");
            //jquery对象转化为DOM对象 之后才能get
            var context = canvas.get(0).getContext("2d");

            var text = "嘻嘻嘻嘻西";
            context.font = "50px serif"; //设置字号和字体
            context.fillText(text, 300, 300); //默认文本10px
            // context.font = "italic 50px serif"; //设置为斜体
            //context.fillText(文本名称，文本左下角x坐标，文本左下角y坐标)

            var text = "嘻嘻嘻嘻西";
            // context.font = "50px serif"; //设置字号和字体
            context.font = "italic 100px serif"; //设置为斜体
            context.lineWidth = 5; //加粗
            context.strokeStyle = "green"; //设置字体边框颜色
            context.strokeText(text, 100, 100); //默认文本10px
        });

2、擦除canvas

擦除正方形：
context.clearRect(该元左上角x坐标，该元左上角y坐标，清除的宽度，清除的高度);
擦除圆形：
context.clearRect(圆心x坐标-半径长度(元素左上角x坐标)，圆心y坐标-半径长度(元素左上角y坐标)，直径，直径)
擦除全部：
context.clearRect(0, 0, 500, 500); //500,500是自己设置画布的宽和高
context.clearRect(0, 0, canvas.width(), canvas.height());

            //擦除矩形
            //context.fillRect(x坐标,y坐标,宽度,高度)
            context.fillStyle = "red";
            context.fillRect(300, 40, 100, 100);
            //context.clearRect(该元左上角x坐标，该元左上角y坐标，清除的宽度，清除的高度);
            context.clearRect(300, 40, 100, 100); //清除正方形

            //擦除圆形
            context.beginPath();
            context.arc(230, 90, 50, 0, Math.PI * 2, false);
            context.closePath();
            context.fill();
            // context.clearRect(圆心x坐标-半径长度(元素左上角x坐标)，圆心y坐标-半径长度(元素左上角y坐标)，直径，直径)
            context.clearRect(180, 40, 100, 100); //清除圆形

            context.clearRect(0, 0, 500, 500); //500,500是自己设置的宽和高
            context.clearRect(0, 0, canvas.width(), canvas.height());
            //清除画布中所有内容

3、使canvas填满浏览器窗口

注意：

• 解决canvas元素和浏览器窗口旁边会有一个白色空隙的问题，要在css文件中清除默认样式。

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    width: 100%;
}
canvas {
    display: block;
    /* 这样能设置高度和宽度 不会出现滚动条 */
}

• 需要调整浏览器窗口大小的同时调整canvas元素的大小：
  $(window).resize(resizeCanvas);
  同时封装调整窗口大小的resizeCanvas()函数，每当浏览器窗口大小发生变化时，就调用resizeCanvas()函数。
  js完整代码：

$(document).ready(function () {
     var canvas = $("#myCanvas");
     //jquery对象转化为DOM对象 之后才能get
     var context = canvas.get(0).getContext("2d");
         $(window).resize(resizeCanvas); //调整浏览器窗口大小的时候调整canvas元素的大小
         resizeCanvas();
         function resizeCanvas() {
            canvas.attr("width", $(window).get(0).innerWidth);
            canvas.attr("height", $(window).get(0).innerHeight);
            context.fillRect(0, 0, canvas.width(), canvas.height());
         }
});