HTML5中canvas的学习以及运用canvas绘制渐变圆

一、canvas绘制步骤的学习

1.定义画布

首先，定义了一个id为app，高300，宽400并且背景色为白色的画布

        <canvas id="app" height="300" width="400" style="background-color: #fff;"> </canvas>

2.在script脚本中进行绘制               

        <script>

                //1. 获取canvas 元素

                var app = document.querySelector("#app")

                //2. 获取CanvasRenderingContext2D 实例对象 ， 用该实例对象提供的方法进行图形绘制

                var context = app.getContext("2d");

                //3. 绘制

                context.fillStyle = "pink"

                context.fillRect(0,0,100,100);