欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML5---Canvas相关内容1

程序员文章站 2022-03-07 18:41:19
Canvascanvas不能通过css来设置canvas的宽和高获取面板对象canvas的具体步骤页面加载获取面板检测绘制对象是否支持获取绘制对象参数一：起始点的横坐标参数二：起始点的纵坐标参数三：矩形的宽参数四：矩形的高对象.strokeRect(参数一，参数二，参数三，参数四)对象.fillRect(参数一，参数二，参数三，参数四)对象.clearRect(参数一，参数二，参数三，参数四)......

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

    }

HTML5---Canvas相关内容1
利用ps剪贴板发现有1像素重叠，原因是各自重叠0.5像素
HTML5---Canvas相关内容1
HTML5---Canvas相关内容1

  //页面加载
    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>

HTML5---Canvas相关内容1

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

本文地址：https://blog.csdn.net/weixin_45511236/article/details/107519581

相关标签： 笔记

上一篇： JavaScript中对象的知识点。

下一篇： 【人生苦短我学Vue】-【DAY10】-Vue CLI（脚手架）

推荐阅读