html 5

 draw() {
      // ctx.fillStyle = "rgb(red,0,0)"; //设置填充色
      // ctx.fillStyle="red"; 
      //画矩形
      // ctx.fillRect(10, 90, 100, 120); //画出矩形  实心的
    
      ctx.fillStyle = "rgba(254, 254, 254, 1)"; //设置颜色并设置透明度为 0.5
    ctx.fillRect(0, 0, screenWidth, screenHeight);

      // ctx.strokeRect(40,80,130,80);  //绘制矩形边框

      // ctx.clearRect(20,20,60,60);  //清除指定区域

    //画线
    // ctx.beginPath();
    // ctx.strokeStyle = "blue"; // 设置线条颜色
    // ctx.moveTo(10, 10);  //起始点
    // ctx.lineTo(100, 10);  //画一条长度为100，  y轴为 +10 的线
    // ctx.lineTo(200, 200); //从上一条线的结束点开始画
    // ctx.closePath(); //关闭节点，  形成包围图形  闭合路径
    // ctx.fillStyle = "green";  //指定填充颜色
    // ctx.fill(); //开始填充
    // ctx.stroke();  //开始画图

    //画圆形
    // ctx.beginPath();
    // ctx.strokeStyle = "blue";
    // ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
    // ctx.moveTo(110, 75);
    // ctx.arc(75, 75, 35, 0, Math.PI, false);   // 口(false 表示 顺时针画)  // Math.PI 表示画半块， 
    // ctx.moveTo(65, 65);
    // ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左眼
    // ctx.moveTo(95, 65);
    // ctx.stroke();
    // ctx.beginPath();
    // // ctx.fillStyle="red"; 
    // ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右眼
    // ctx.fill();

    //画图片
    // var img = new Image();
    // img.onload = function(){
    //   // ctx.drawImage(img, 10, 10);  //只指定位置
    //   // ctx.drawImage(img, 10, 10, 302/4, 300/4);  //指定位置,   指定宽度
    //   ctx.drawImage(img, 60, 80, 175, 175, 30, 30, 190, 190); //图片切片，  60, 80, 175, 175 切图片区域， 30, 30, 90, 90        将切后的图片画的位置
    // }
    // img.src = 'images/angle.jpg';

    //透明度使用
    // var img = new Image();
    // img.onload = function(){
    //   ctx.globalAlpha = 0.5;
    //   ctx.drawImage(img, 10, 10);
    //   ctx.globalAlpha = 0.6;
    //   ctx.fillRect(125, 125, 80, 85);
    // }
    // img.src = 'images/angle.jpg';

    //渐变使用--矩形渐变
    // var lingrad = ctx.createLinearGradient(0, 0, 0, 400); // 400 400  //图片的渐变
    // lingrad.addColorStop(0, '#00ABEB');
    // lingrad.addColorStop(0.5, '#fff');  // 0-0.5  由蓝色渐变为白色
    // lingrad.addColorStop(0.5, '#66CC00'); //改成绿色
    // lingrad.addColorStop(1, '#fff');  //0.5-1 渐变为白色

    // var lingrad2 = ctx.createLinearGradient(0, 0, 0, 250);  //黑色边框的渐变
    // lingrad2.addColorStop(0.5, '#000');
    // lingrad2.addColorStop(1, 'rgba(0,0,0,0)');

    // // assign gradients to fill and stroke styles
    // ctx.fillStyle = lingrad;
    // ctx.strokeStyle = lingrad2;

    // // draw shapes
    // ctx.fillRect(10, 10, 350, 350);
    // ctx.strokeRect(110, 130, 150, 150);

    //球型渐变
    // var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
    // radgrad.addColorStop(0, '#A7D30C');
    // radgrad.addColorStop(0.9, '#019F62');
    // radgrad.addColorStop(1, 'rgba(1,159,98,0)');

    // var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
    // radgrad2.addColorStop(0, '#FF5F98');
    // radgrad2.addColorStop(0.75, '#FF0188');
    // radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

    // var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
    // radgrad3.addColorStop(0, '#00C9FF');
    // radgrad3.addColorStop(0.8, '#00B5E2');
    // radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

    // var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
    // radgrad4.addColorStop(0, '#F4F201');
    // radgrad4.addColorStop(0.8, '#E4C700');
    // radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

    // // draw shapes
    // ctx.fillStyle = radgrad4;
    // ctx.fillRect(0, 0, 150, 150);
    // ctx.fillStyle = radgrad3;
    // ctx.fillRect(0, 0, 150, 150);
    // ctx.fillStyle = radgrad2;
    // ctx.fillRect(0, 0, 150, 150);
    // ctx.fillStyle = radgrad;
    // ctx.fillRect(0, 0, 150, 150);

    //save和restore方法
    // var img = new Image();
    // img.onload = function () {
    //   ctx.save();  //先将画笔保存起来
    //   ctx.globalAlpha = 0.5;  //改变了画笔的透明度
    //   ctx.drawImage(img, 100, 50);  //画图片
    //   ctx.restore();  //恢复画笔（透明度恢复成 1）
    //   ctx.fillRect(120, 100, 50, 50);  //画矩形
    // }
    // img.src = 'images/angle.jpg';
      
      // save和restore方法是用来保存和恢复canvas状态的
      // canvas状态就是当前画面应用的所有样式和变形的一个快照
      // 每次save，当前的状态就会被推入堆中保存起来
      // 每次restore，上一个保存的状态就会从堆中弹出，所有设定都恢复
      // save可以嵌套调用，和restore一一对应


    //移动画笔
    // var img = new Image();
    // img.onload = function () {
    //   ctx.drawImage(img, 10, 10);
    //   ctx.globalAlpha = 0.5;
    //   ctx.translate(20, 20); //重新定位画笔位置
    //   ctx.fillRect(0, 0, 50, 50);
    // }
    // img.src = 'images/angle.jpg';

    // rotate 以起始点作为原点旋转
    // var img = new Image();
    // img.onload = function () {
    //   ctx.drawImage(img, 0, 0);
    //   ctx.rotate((45).toRad());  //调用 toRad 旋转45度
    //   ctx.fillRect(0, 0, 50, 50);
    // }
    // img.src = 'images/angle.jpg';

    // Number.prototype.toRad = function () {  
    //   return Math.PI * this / 180;
    // }

    //rotate 以起始点作为原点旋转
    // var img = new Image();
    // img.onload = function () {
    //   ctx.drawImage(img, 0, 0);
    //   ctx.translate(25, 25);  //移动画笔坐标系到矩形的中心点，  在这个点上旋转
    //   ctx.rotate((45).toRad());  //调用 toRad 旋转45度
    //   ctx.translate(-25, -25); //恢复坐标到原位置
    //   ctx.fillRect(0, 0, 50, 50);
    // }
    // img.src = 'images/angle.jpg';

    // Number.prototype.toRad = function () {
    //   return Math.PI * this / 180;
    // }

    //scale 缩放
    // var img = new Image();
    // img.onload = function () {
    //   ctx.drawImage(img, 0, 0);
    //   ctx.translate(25, 25);
    //   ctx.scale(2, 2); //长 宽 都放大2倍
    //   ctx.translate(-25, -25);
    //   ctx.fillRect(0, 0, 50, 50);
    // }
    // img.src = 'images/angle.jpg';

   

    //动画
    // var sun = new Image();
    // var moon = new Image();
    // var earth = new Image();
    // sun.src = 'images/sun.png';
    // moon.src = 'images/moon.png';
    // earth.src = 'images/earth.png';

    // ctx.globalCompositeOperation = 'destination-over';
    // ctx.clearRect(0, 0, 300, 300); // clear canvas

    // ctx.fillStyle = 'rgba(0,0,0,0.4)';
    // ctx.strokeStyle = 'rgba(0,153,255,0.4)';
    // ctx.save();
    // ctx.translate(150, 150);

    // // Earth
    // var time = new Date();
    // ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
    // ctx.translate(105, 0);
    // ctx.fillRect(0, -12, 50, 24); // Shadow
    // ctx.drawImage(earth, -12, -12);

    // // Moon
    // ctx.save();
    // ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
    // ctx.translate(0, 28.5);
    // ctx.drawImage(moon, -3.5, -3.5);
    // ctx.restore();

    // ctx.restore();

    // ctx.beginPath();
    // ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit
    // ctx.stroke();

    // ctx.drawImage(sun, 0, 0, 300, 300);

    //轮播图
   

    
    }