HTML5中canvas标签用法

一、前言

canvas主要是创建画布；之后可以通过js在画布上实现绘画

创建画布

     <canvas width="600" height="400" id="mycancas">
      当前浏览器版本不支持，请升级
      </canvas>

根据id获取画布

  //得到canvas的画布
    var canvas=document.getElementById("mycancas");
    //得到画布的上下文,上下文有两个 2d和3d
    //所有的图形绘制都是通过ctx属性或者方法进行设置的，和canvas标签没有关系了
     var ctx=canvas.getContext("2d")

之后的绘画就和canvas没关系了，主要是获取的Context属性ctx

二、绘制(常用API)

1、矩形 (可以直接绘制)

  // 绘制填充矩形
   ctx.fillRect(x,y,w,h);  参数：(左上角xy   相对画布)
  // 绘制矩形边框
   ctx.strokeRect(x,y,w,h);

2、清除、擦除

ctx.clearRect(x,y,w,h); // (擦除一个矩形范围)

3、颜色

// 设置边框颜色
  ctx.strokeStyle='red';
// 设置填充颜色
 ctx.fillStyle='green';

4、绘制路径 画弧 和线需要

     ctx.beginPath()  //创建一个路径
   为了设置一个不规则的多边形状态
   路径是闭合的，使用路径进行绘制的时候需要既定的步骤
   需要设置路径的起点
   使用绘制命令画出路径
   封闭路径
   填充或者绘制已经封闭的路径的形状

示例：

  ctx.beginPath()  //创建一个路径
  ctx.moveTo(200,100);  //第一个连接点 会把所有点连接起来
    //描述进行路径
   ctx.lineTo(200,200); //第二个点
   ctx.lineTo(300,100); //第三个点
    ctx.closePath();  //封闭路径，去除这端就是绘制不封闭的图形，即线
   //绘制这个不规则的图形
    ctx.strokeStyle="red" //设设置边框颜色
    ctx.stroke(); //开始绘制(把前面点连接成封闭图形),或者ctx.fill(); 就是填充

6、圆弧 (需要在路径中绘制)

   //创建一个路径
  ctx.beginPath();
   //x(圆心)  y    r  起始弧度 接收弧度 顺时针
  ctx.arc(200,200,100,1,2*3.14,false); //(x,y,r,0,2*3.14,true)   x(圆心x)   y(圆心)  0,1(表示一个弧度 最大为2派)  false(表示顺时针)
   ctx.stroke(); //绘制边框 或者  ctx.fill();绘制填充

7、透明度

   //透明度
  ctx.globalAlpha=1; //设置下面图形的透明度  1表示不透明

8、线形 (需要在路径中绘制)

(1)、设置画线的粗细

 ctx.lineWidth=5;
不设置默认是1、一次绘画只能设置一次，设置多次以最新设置的为准,
也能设置ctx.strokeRect()  矩形边框的粗细

示例：

     ctx.beginPath(); //创建路径
     ctx.lineWidth=5; //设置粗细
     ctx.moveTo(100,100); //起始
     ctx.lineTo(150,200); //经过点
     ctx.lineTo(200,200); //经过点
     ctx.stroke(); //绘制  边框(不填充)

(2) 、线段末端的状态

 ctx.lineCap="round";
 butt ：线段末端以方形结束，默认
 round: 线段末端以圆形结束
 使用方法和 ctx.lineWidth 一致，直接放到画线途中即可

(3)、连接处 ，折线端点处的部分

 ctx.lineJoin="round";
 round: 圆弧状态
 miter：方角 默认
 bevel：平滑

（4）、设置虚线

 ctx.setLineDash([3,20])  ([单个虚线的长度,虚线小段间的距离])
 使用方法和前面一致，加入在绘制过程中即可

9、其他的绘制

（1）、文字 (可以直接绘制)

 ctx.font="20px 宋体";    "字体大小 字体类型 "
 ctx.fillText("你好,我是30px的宋体文字",100,100); ("文字",x,y) x和y表示首个字出现的位置

(2)、渐变

 先设置渐变曲线起始位置 在设置颜色
 在把属性复制给 ctx.fillStyle

             var ctxx=ctx.createLinearGradient(100,100,200,200); （x1,y1,x2,y2） 渐变曲线起始位置
            ctxx.addColorStop(0,"red");  //添加颜色 0表示起始
            ctxx.addColorStop(0.8,"purple"); 添加颜色 0.8 表示起始  末端为1

            ctx.fillStyle=ctxx;   把渐变颜色设置为当前绘制的颜色
            ctx.fillRect(100,100,100,100); //绘制填充矩形

(3)、阴影

  ctx.shadowOffsetX=1; //阴影偏移状态
  ctx.shadowOffsetY=1; //阴影偏移状态
  ctx.shadowBlur=10;  //阴影模糊程度
 ctx.shadowColor="red"; //阴影颜色
 ctx.font="20px 宋体";
 ctx.fillText("你好,我是30px的宋体文字",100,100);

10、添加图片

canvas中使用drawImage来绘制图片，主要是把外部的图片导入进行绘制到画布上

 //第一步创建一个image元素
   var image=new Image();
  //第二步用src设置图片的地址
   image.src="we.png";
   //第三步在onLoad之后再进行绘制图片，否则不会渲染
    image.onload=function (){
          ctx.drawImage(image,100,100,100,100); // (图片 加载位置x y  图片宽高w h)
            }
   

11、资源管理器

在开发的时候，有些静态资源(图片等)是需要请求回来的，否则如果直接开始
某些静态资源没有就会报错或者空白，
全部静态资源加载完成时候才能进入网站
所以在canvas渲染过程中进行对图片的资源加载

  (1)、获取JSON对象长度
   this.dao={
       "imj1":"qw2.png",
      "imj2":"we.png"
      }
      var leng= Object.keys(this.dao);  //通过Object.keys的方式得到JSON数据
      在创建图片
      提示信息可以使用文本绘制

12、变形

      canvas是可以进行变形的，但是变形的不是元素，而是ctx,ctx是整个画布的渲染区域，整个画布在变形
     
         save()保存画布(canvas)的所以状态
      保存属性(移动、旋转、缩放) ，保存除了绘制形状之外的属性

      restore() 恢复canvas的状态
      它们都没有参数。Canvas的状态就是当前画面应用的所有样式和变形的一个快照。

   平移:   ctx.translate(50,50); 是css内容 下面要绘制的内容进行平移
   旋转:   ctx.rotate(3.14);  //下面图形内容进行旋转 弧度制
   缩放:   ctx.scale(1,1); // (同时改变xw,同时改变yh) 按倍数

三、动画

动画原理 清屏--绘制的循环

通过清屏ctx.clearRect(x,y,w,h); // (擦除一个矩形范围) 和绘画实现动态效果

再通过定时器反复执行

//定时器
setInterval(()=>{
  Fel.abc();
},30);