canvas画布

1.canvas画布

                是一个画布标签默认情况下它在网页上是一块空白的区域，大小300*150

例1：canvas画一条红色斜线（及基本步骤）

<canvas id="canvas" width="500" height="500px">您的浏览器版本低</canvas>
        <script>
            //1.获取一个画布(要创建一个画布对象)
            var canvas = document.getElementById("canvas");
            //2.创建一个画布上下文对象
            var context = canvas.getContext("2d");
            //3.告诉程序绘画路径开始
            context.beginPath();
            //4.绘制图形的起始点(坐标)
            context.moveTo(0,0);
            //5.绘制图形的连接点
            context.lineTo(100,100);
            //6.设置图形的样式
            context.strokeStyle="red";
            //7.描边
            context.stroke();
        </script>

示例代码2：cavas绘制有填充矩形

        知识点1:调用一个画矩形的函数：fillRect(x,y,width,height)；

                定义和用法

                        fillRect()方法绘制"已填充"的矩形。默认的填充颜色是黑色。

                        提示:请使用fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。

参数	描述
x	矩形左上角的x坐标
y	矩形左上角的y坐标
width	矩形的宽度，以像素计
height	矩形的高度，以像素计

        知识点2:绘制矩形有填充：context.fillRect(0,0,200,100);

        知识点3:设置线条的粗细(宽度)：context.lineWidth=number;

                定义和用法：lineWidth属性设置或返回当前线条的宽度，以像素计。

值	描述
number	当前线条的宽度，以像素计

        知识点4:绘制矩形无填充：context.strokeRect(x,y,width,height);

                定义和用法：方法绘制矩形(无填充)。笔触的默认颜色是黑色.

                提示: