画布小案例

一、绘制直线

  <canvas width="500px" height="500px"></canvas>

  1.获取画布

    var canvas=document.querySelector("canvas");

  2.获取画布的上下文

    var ctx=canvas.getContext('2d');

  3.开始一条路径

    ctx.beginPath();

  4.确定起始点

    ctx.moveTo(100,100);

 5.确定结束点

    ctx.lineTo(400,400);

   设置直线的颜色和线宽  在着色之前设置

    ctx.strokeStyle='blue';

    ctx.lineWidth=5;

   6.着色

    ctx.stroke();

  7.结束路径

    ctx.closePath();

二、绘制视频

 <canvas width="400px" height="400px" ></canvas>

    <video src="./音视频/音视频/1.mp4" width="300px" autoplay controls></video>

window.οnlοad=function(){

            //获取标签

            var canvas=document.querySelector("canvas");

            var video=document.querySelector("video");

            //获取上下文

            var context=canvas.getContext('2d');

            //声明一个绘制视频的方法

            draw()

            function draw(){

                context.drawImage(video,0,0,200,200)

                //请求动画帧

                requestAnimationFrame(draw);

            }

        }

 

三、绘制图像

<canvas width="400px" height="400px" ></canvas>

   window.οnlοad=function(){

          var canvas=document.querySelector("canvas");

          var context=canvas.getContext('2d');

          //创建一个img节点

          var img=new Image();

          //放图片路径

          img.src='xz.jpg';

          //绘制图片

          img.οnlοad=function(){

            context.drawImage(img,0,0,200,200);

          }

         }

 四、渐变图形

 <canvas width="400px" height="400px" style="background-color: #ccc;"></canvas>

 //文档加载完毕再去执行代码

    window.οnlοad=function(){

    // 1.获取画布

    var canvas=document.querySelector('canvas');

    //2.获取上下文对象 context

    var context=canvas.getContext('2d');

    //3.声明一个线性渐变对象 第一二个参数渐变起点  第三四个渐变终点

    var g=context.createLinearGradient(0,0,400,400);

    //4.给渐变对象添加渐变色

    g.addColorStop(0,'purple')

    g.addColorStop(0.5,'yellow')

    g.addColorStop(1,'pink')

    //5.将渐变对象给到填充样式

    context.fillStyle=g;

    //6.绘制线性渐变矩形

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

    }

 

五、径向渐变

 <canvas width="400px" height="400px" style="background-color: #ccc;"></canvas>

  //文档加载完毕再去执行代码

    window.οnlοad=function(){

    // 1.获取画布

    var canvas=document.querySelector('canvas');

    //2.获取上下文对象 context

    var context=canvas.getContext('2d');

    //3.声明一个径向渐变对象 第一二个参数小圆圆心  第三个参数是半径  第四五参数大圆原型  第六参数大圆半径

    var g=context.createRadialGradient(200,200,50,200,200,200);

    //4.给渐变对象添加渐变色

    g.addColorStop(0,'purple')

    g.addColorStop(0.25,'yellow')

    g.addColorStop(0.5,'cyan')

    g.addColorStop(0.75,'blue')

    g.addColorStop(1,'pink')

    //5.将渐变对象给到填充样式

    context.fillStyle=g;

    //6.绘制线性渐变矩形

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

    }