day01-canvas标签

canvas标签

一：canvas标签的特点：

​ 1·该标签是H5的新标签，IE8及以下的浏览器不支持该标签

​ 2·该标签只是图形的容器，必须通过脚本语言js来绘制图形

​ 3·该标签内的所有文本都会在不支持该标签的浏览器中显示

​ 4·应用场景：游戏 / 可视化数据 / 多媒体 / banner广告

二：canvas标签的使用:

1. 使用获取到该标签

2. 调用getContext(‘2d’)方法返回一个对象，

   该对象提供了一些在画布进行2d绘图的属性和方法

   getContext(‘webgl’)进行立体绘图的属性与方法

3. 根据文档选择合适的属性和方法来绘制图像

4. 基本绘图命令：

   • 设置开始绘图的位置: context.moveTo( x, y ).
   • 设置直线到的位置: context.lineTo( x, y ).
   • 描边绘制: context.stroke().
   • 填充绘制: context.fill().
   • 闭合路径: context.closePath().
   • 开始路径: context.beginPath().

四：绘制矩形

• fillstyle属性表示绘制图像的颜色

• fillRect()绘制图像填充的矩形大小;

  参数：fillRect(x坐标值，y坐标值，绘制图像的width，会制图像的height)

<canvas id="canv"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canv")
        var ctx = canvas.getContext('2d')
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(100, 100, 400, 800);
    </script>

五：绘制线

• moveTo（）表示该线条开始的坐标

• lineTo（）表示该线条结束的坐标

• stroke()是用来绘制线条的方法，即就是开始绘制

• line.width设置线宽

• line.Cap 设置线末端的类型

  ​ —butt（方形）

  ​ —round（圆角）

  ​ —square（突出圆角）

• line.Join设置相交线的拐点

  ​ —bevel（平切）

  ​ —round（圆角）

  ​ —milter（直角）

 <canvas id="mycanvas">该标签的直线和圆</canvas>
    <script type="text/javascript">
        var canva = document.getElementById("mycanvas")
        var cte=canva.getContext('2d');
        cte.moveTo(0,0);
        cte.lineTo(200,300);
        cte.stroke()

六：绘制圆

• beginPath()起始一条路径(着手开始绘图)

• 1·参数：arc(圆中心的x坐标，中心的y坐标，半径，起始角度，结束角度，boolean值（false表示顺时；true表示逆时）)

• 2·画圆时候将起始角定义为0，结束角设置为 2*Math.PI

<canvas id="mycanvas">该标签的直线和圆</canvas>
    <script type="text/javascript">
        var canva = document.getElementById("mycanvas")
        var cte=canva.getContext('2d');
		// 起始一条路径(着手开始绘图)
    	cte.beginPath();
    	/* 2·画圆时候将起始角定义为0，结束角设置为 2*Math.PI。*/
    	cte.arc(100,75,50,0,2*Math.PI);
   		cte.stroke()
 </script>



七：==路径图==

```js
<canvas id="hello">该标签的路径</canvas>
 <script type="text/javascript">
var can=document.getElementById("hello");
    var tes=can.getContext("2d");
     tes.beginPath();
     //lineWidth属性表示路径的宽
     // strokeStyle属性表示路径的颜色
     tes.lineWidth="6"
     tes.strokeStyle="blue"
     tes.moveTo(0,80);
     tes.lineTo(255,80);
     tes.stroke();
    
     tes.beginPath();
     tes.strokeStyle="red"
     tes.moveTo(255,0);
     tes.lineTo(0,255);
     tes.stroke();
</script>

八：文本

• font属性指定文本的大小和样式

• 1·参数：strokeText(“文本” ，x轴坐标，y轴坐标)

  2·作用：定义文本内容 ，strokeText（）是空心文本；fillText（）是实心文本

      <canvas id="text"width="500" height="800">绘制文本失败</canvas>
        var txt=document.getElementById("text")
        var words=txt.getContext("2d");

        words.font="50px  '微软雅黑'";
        words.strokeText("你好！李银河",100,100)

九：渐变

• 线条渐变步骤：

  1·创建线条

  • createLinearGradient()创建线条渐变
  • 参数：createLinearGradient(开始x坐标，开始y坐标，结束x坐标，结束y坐标)
  • 必须配合addColorStop（）来设置渐变颜色的开始和结束

  2·填充

    <canvas id="line" width="200" height="100">绘制线条渐变失败</canvas>
     var ls=document.getElementById("line");
     var lin=ls.getContext("2d");
     
        //创建渐变线条
        var gre=lin.createLinearGradient(0,0,600,0);
        gre.addColorStop(0,"red");
        gre.addColorStop(1,"blue");

        //使用渐变效果填充
        lin.fillStyle=gre;
        lin.fillRect(10,10,150,80);
    

• 径向渐变

  1·创建线条

  • createRadialGradient()创建径向渐变
  • 参数：createRadialGradient(开始x坐标，y，半径，结束x坐标，y，半径)创建径向渐变
  • 必须配合addColorStop（）来设置渐变颜色和停止位置

  2·填充

   <canvas id="circle" width="200" height="100" style="border: 1px solid red;">绘制线条渐变失</canvas>
      	var lc=document.getElementById("circle");
          var cir=lc.getContext("2d");
       
          var gir=cir.createRadialGradient(75,50,5,90,60,100);
          gir.addColorStop(0,"blue");
          gir.addColorStop(1,"pink");
  
          //使用渐变效果填充
          cir.fillStyle=gir;
          cir.fillRect(10,10,150,80);