7.15、HTML5画布（简单图形和虚线）

1、在HTML5中画布的使用需要配合js使用，在HTML中画布的标签是canvas

  <canvas id="canvas" width="500" height="500"></canvas>
  <!-- 有一些比较老版的浏览器识别不了画布，所以我们一般加上 -->
    <canvas id="canvas" width="500" height="500">你的浏览器不支持画布</canvas>

2、js中使用画布需要7个步骤：

  • 1.获取一个画布（要创建一个画布对象）
  • 2.创建一个画布上下文对象
  • 3.告诉程序绘画路径开始（可省略）

  • 4.绘制图形的起始点（一般都是坐标）

  • 5.绘制图形的连接点

  • 6.设置图形的样式

  • 7.描边（设置图形的边框）

如下是一个简单的三角形：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 有一些比较老版的浏览器识别不了画布，所以我们一般加上 -->
    <canvas id="canvas" width="500" height="500">你的浏览器不支持画布</canvas>
</body>
<script type="text/javascript">
    //1.获取一个画布（要创建一个画布对象）
    var canvas = document.getElementById("canvas");
    //2.创建一个画布上下文对象
    var context = canvas.getContext("2d")
        //3.告诉程序绘画路径开始
    context.beginPath();
    //4.绘制图形的起始点（坐标）
    context.moveTo(0, 0);
    //5.绘制图形的连接点(结束)
    context.lineTo(0, 300);
    context.lineTo(400, 300);
    context.lineTo(0, 0);
    //6.设置图形的样式
    context.strokeStyle = "red"
        //7.描边
    context.stroke()
        //填充颜色
        // context.fillStyle = "red"; //填充的颜色
        //context.fill(); //填充
        //设置线的粗细
    context.lineWidth = 30;
</script>

</html>

效果：

 

补充：

1.给整个三角形填充的颜色使用context.fillStyle = "color"，这个只是想要填充的颜色，想要填充需要配合 context.fill();使用但是如果  context.fill()在前可能会没有颜色效果

 context.fill()在下的效果（代码参考上面的↑）：

 context.fill()在下的效果（代码参考上面的↑）：

 

 

2.  context.closePath();是闭合的意思他可以自动闭合，就比如上面的三角形我用的 是 context.lineTo(0, 0);（坐标）写的，而他可以完全用context.closePath()代替

//其他代码及效果图与第一个一样  
context.lineTo(0, 300);
    context.lineTo(400, 300);
    // context.lineTo(0, 0);
    context.closePath(); //闭合

3、使用画图画虚线（3种方法）

1.画三角形就是使用直线做出来的，画虚线只不过是改他的坐标而已

如下段代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="500" height="500">你的浏览器等级太低，请升级</canvas>
</body>
<script>
    //1.获取一个画布（创建一个画布对象）
    var canvas = document.getElementById("canvas");
    //2.创建一个画布上下文
    var context = canvas.getContext("2d");
    //3.开始路径（可省略）
    context.beginPath();
    //4.设置起始点
    context.moveTo(0, 0)
    context.lineTo(5, 0)
    context.moveTo(10, 0)
    context.lineTo(15, 0)
    context.moveTo(20, 0)
    context.lineTo(25, 0)
    context.moveTo(30, 0)
    context.lineTo(35, 0)

    //设置样式
    context.lineWidth = 5;
    //描边
    context.stroke()
</script>

</html>

效果：

 

2.第一种方式虽然可以做出虚线但是太过繁琐，我们都知道js循环既然他们都是用坐标，那我们就完全可以使用循环做，我们只需要更改一下坐标而已，而且使用循环代码会更简洁

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="500" height="500">你的浏览器等级太低，请升级</canvas>
</body>
<script>
    //1.获取一个画布（创建一个画布对象）
    var canvas = document.getElementById("canvas");
    //2.创建一个画布上下文
    var context = canvas.getContext("2d");

    //使用循环：做重复的事
    for (var i = 0; i < 50; i++) {
        context.beginPath();
        context.moveTo(10 * i, 0);
        context.lineTo(10 * i + 5, 0);
        context.closePath();
        //设置样式
        context.lineWidth = 5;
        //描边
        context.stroke()
    }
</script>

</html>

效果：

 

3.其实他们有给封装了一个函数就是setLineDash()这个函数只需要添加参数即可

setLineDash()三个参数

第一个是虚线小段的长度，第二个是虚线的间隔，第三个是第二段虚线的长度，第四个是第二段虚线后边的间隔

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="500" height="500">你的浏览器等级太低，</canvas>
</body>
<script>
    //1.获取一个画布（创建一个画布对象）
    var canvas = document.getElementById("canvas");
    //2.创建一个画布上下文
    var context = canvas.getContext("2d");
    //3.开始路径（可省略）
    context.beginPath();
    context.setLineDash([10, 10]);
    context.moveTo(0, 0)
    context.lineTo(200, 0)
    context.lineWidth = 5;
    context.stroke()
</script>

</html>

效果：

 补充：

    context.lineWidth = 数值;  设置线的粗细，设置的效果如上图

没有设置的效果：

 

版权声明：本文为sh2001824原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。