HTML5---Canvas相关内容1

古城微笑少年丶 2023-03-01 06:17 122阅读 0赞

## Canvas ##

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

1.  页面加载
2.  获取面板
3.  检测绘制对象是否支持
4.  获取绘制对象

<!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);
    
        }

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

//页面加载
        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（）才能得到不一样样式

## Canvas中的save和restore ##

### save ###

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

### restore ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 3]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]: /images/20230209/7c9688821a3e472ea8d0c80aebe71de9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]: /images/20230209/e9c64b6ab0474de5a6b82709ca16e16d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]: /images/20230209/f37359b1097b46eda60517818f626ea0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 3]: /images/20230209/b9c89a46babb4814a260017ab59c3c46.png