HTML5---Canvas相关内容1

Canvas

canvas不能通过css来设置canvas的宽和高
获取面板对象canvas的具体步骤

页面加载
获取面板
检测绘制对象是否支持
获取绘制对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      background-color: #C7EDCC;
    }

    canvas {
      border: 2px solid red;
      position: absolute;
      left: 200px;
      top: 200px;
      background-color: white;
    }
  </style>
</head>
<body>
<canvas id="test" width="300" height="250">
  您的破浏览器不支持,请升级新的浏览器!就这玩意,爱用不用
</canvas>
<script type="text/javascript">

  //页面加载后获取画布(虽然代码写在这里,可以不需要再写onload事件,但是,我愿意)
  onload = function () {
    //获取不到
    var canvas = document.querySelector("#test");
    //检测浏览器是否支持这个对象
    if (canvas.getContext) return;
    //获取绘制对象
    var ctx = canvas.getContext("2d");
  };
</script>
</body>
</html>

Canvas绘制

路径方式：对象.strokeRect(参数一，参数二，参数三，参数四)
填充方式：对象.fillRect(参数一，参数二，参数三，参数四)
重新绘制并透明方法：对象.clearRect(参数一，参数二，参数三，参数四)
参数一：起始点的横坐标
参数二：起始点的纵坐标
参数三：矩形的宽
参数四：矩形的高
设置以路径方式绘制边框颜色: 对象.strokeStyle = " 颜色"
设置以填充方式绘制边框颜色: 对象.fillStyle = " 颜色"
设置边框粗细: 对象.lineWidth= " 颜色样板"
设置连接处的样式: 对象.lineJoin = miter/round/bevel
miter—— 直角
round—— 圆角
bevel—— 三角
先设置样式再绘制矩形

  //页面加载
    window.onload= function () {
        //获取画板
        var canvas = document.querySelector("#test");
        console.log(canvas);
        //检测是狗支持绘制对象
        if(!canvas.getContext) return;
        //获取绘置对象
        var ctx= canvas.getContext("2d");
        //设置边框颜色
        ctx.strokeStyle = "green";
        //设置边框粗细
        ctx.lineWidth = 10;
        //设置连接处的样式
        ctx.lineJoin = "round"
        //路径方式
        ctx.strokeRect(10,10,100,100);
    }

Canvas绘制一个矩形

  //页面加载
    window.onload= function () {
        //获取画板
        var canvas = document.querySelector("#test");
        console.log(canvas);
        //检测是狗支持绘制对象
        if(!canvas.getContext) return;
        //获取绘置对象
        var ctx= canvas.getContext("2d");
        //设置边框颜色
        ctx.strokeStyle = "green";
        ctx.lineJoin = "round"
        ctx.strokeRect(100,100,100,100);
        ctx.fillStyle = "red" ;
        ctx.fillRect(0,0,100,100);

    }

在这里插入图片描述
利用ps剪贴板发现有1像素重叠，原因是各自重叠0.5像素

  //页面加载
    window.onload= function () {
        //获取画板
        var canvas = document.querySelector("#test");
        console.log(canvas);
        //检测是狗支持绘制对象
        if(!canvas.getContext) return;
        //获取绘置对象
        var ctx= canvas.getContext("2d");
        //设置边框颜色
        ctx.strokeStyle = "green";
        ctx.lineJoin = "round"
        ctx.strokeRect(100,100,100,100);
        ctx.fillStyle = "red" ;
        ctx.fillRect(0,0,100,100);

    }

Canvas绘制路径

点与点之间连接需要用stroke（）才可绘制
开始的起点: 对象.moveTo(参数一，参数二)；
某一点/结束点: 对象.lineTo(参数一，参数二)；
参数一：起始点的横坐标
参数二：起始点的纵坐标
绘制方法: 对象.stroke();
绘制两端的效果： 对象.lineCap = “butt/round/square”
butt——以方块效果结束，比原来短（默认样式）
square——以方块结束啊,但是增加一个宽度和线段相同,高度是线段厚度的一半的矩形区域
round——以圆形结束
绘制两个图形，
需要开启新的一个路径方式（清空样式容器）或者save（）才能得到不一样样式

<script type="text/javascript">
//页面加载后获取画板
  window.onload=function () {
    var canvas = document.querySelector("#test");
    if(!canvas.getContext)return;
    var ctx= canvas.getContext("2d");

    //设置样式
    ctx.lineWidth=10;
    ctx.strokeStyle="red";
    //设置末端显示效果
    //butt以方块效果结束
    //square以方块结束啊,但是增加一个宽度和线段相同,高度是线段厚度的一半的矩形区域
    //round以圆形结束
    ctx.lineCap="square";

    //绘制一条直线
    ctx.moveTo(100,100);
    ctx.lineTo(200,200);
    ctx.stroke();

  };

Canvas中的save和restore

save

save() 是 Canvas 2D API 通过将当前状态放入栈中，保存 canvas 全部状态的方法

restore

restore() 是 Canvas 2D API 通过在绘图状态栈中弹出顶端的状态，将 canvas 恢复到最近的保存状态的方法。 
如果没有保存状态，此方法不做任何改变。

<script type="text/javascript">
  //页面加载后获取画板
  window.onload=function () {
    var canvas = document.querySelector("#test");
    if(!canvas.getContext)return;
    var ctx= canvas.getContext("2d");

    //设置样式---默认黑色填充
    ctx.save();//保存样式状态
    ctx.fillStyle="red";
    ctx.fillStyle="green";
    ctx.save();
    ctx.fillStyle="blue";
    ctx.save();
    ctx.fillStyle="yellow";
    ctx.save();
    ctx.fillStyle="orange";
    ctx.beginPath();

    ctx.restore();//黄色
    ctx.restore();//蓝色
    ctx.restore();
    ctx.restore();

    ctx.fillRect(100,100,200,200);
    ctx.save();//保存
    //样式代码，对上下结构没有任何影响
    ctx.restore();//恢复


  };

</script>

在这里插入图片描述

  1.路径容器
    每次调用路径api时,都会往路径容器里做登记
    调用beginPath时,清空整个路径容器
  2.样式容器
    每次调用样式api时,都会往样式容器里做登记
    调用save时候,将样式容器里的状态压入样式栈
    调用restor时候,将样式栈的栈顶状态弹出到样式样式容器里,进行覆盖
  3.样式栈
    调用save时候,将样式容器里的状态压入样式栈
    调用restor时候,将样式栈的栈顶状态弹出到样式样式容器里,进行覆盖