canvas快速入门1：canvas的线

最新推荐文章于 2024-04-10 16:05:41 发布

wjk_along

最新推荐文章于 2024-04-10 16:05:41 发布

阅读量370

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/wjk_along/article/details/86716721

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. canvas的线

设置canvas宽高，并获取canvas对象，判断是否支持canvas。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
<canvas id="canvas" height="400" width="400" style="border:1px solid #ccc"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    if(canvas.getContext){
        
    }else{
        alert('不支持canvas');
    }
</script>
</body>
</html>

canvas有宽高属性，设置时不需要带单位。

画一条直线，红色的，线宽10px。

// if里面代码如下：
        // 获取画布， getContext中的参数'2d' 固定的，没有'3d'；
        const van = canvas.getContext('2d');
        // canvas 的原点默认在左上角
        // 两点确定一条直线，划线API：lineTo(x,y): x,y横纵坐标。

        van.lineTo(10,10);// 从坐标(10,10)开始 || 此处亦可以用 moveTo(x,y）: 意思是把画笔放到(x,y)这个位置
        van.lineTo(200,10);// 画到(200,10)这个坐标。
        van.lineWidth = 10;// 设置线宽
        van.strokeStyle = 'red'; // 设置画笔的颜色， strokeStyle是用来设置画笔颜色的
        van.stroke();// 这个API是 "绘制"，即前面的操作都是用来告诉这个画笔要绘制成什么样子，这句才是画

宽10像素的红线

再画一条直线，绿色的，线宽10。
改一下纵坐标y的值，然后改一下颜色就OK了。实际上：

        ....
        ....
//紧接上面代码，一个神奇的现象，按照上面同样的方法，
//应该可以画一个同样的横线，只要把纵坐标往下移动一点即可
        van.lineTo(10,60);
        van.lineTo(200,60);
        van.lineWidth = 10;// 设置线宽
        van.strokeStyle = 'green'; // 设置画笔的颜色
        van.stroke();// 绘制

成了这个样子
看样子像是后面的设置画笔的颜色覆盖了上面的颜色，而且点与点之间按顺序自动连接了。实际上就是这个样子的，如何能让他像人一样画完一条线抬笔在画另一条直线？
解决：每个划线的动作前后加上beginPath() / closePath().
完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
<canvas id="canvas" height="400" width="400" style="border:1px solid #ccc"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    if(canvas.getContext){
        // 获取画布， getContext中的参数'2d' 固定的，不要想没有'3d'；
        const van = canvas.getContext('2d');
        // canvas 的原点默认在左上角
        // 两点确定一条直线，划线API：lineTo(x,y): x,y横纵坐标。

        van.beginPath();// 开始（相当于我要下笔了）
        van.lineTo(10,10);// 从坐标(10,10)开始 | 此处亦可以用 moveTo(x,y）: 意思是把画笔放到(x,y)这个位置
        van.lineTo(200,10);// 画到(200,10)这个坐标。
        van.lineWidth = 10;// 设置线宽
        van.strokeStyle = 'red'; // 设置画笔的颜色， strokeStyle是用来设置画笔颜色的
        van.stroke();// 这个API是 "绘制"，即前面的操作都是用来告诉这个画笔要绘制成什么样子，这句才是画
        van.closePath();// 结束（相当于我要拿开笔了）

       //一个神奇的现象，按照上面同样的方法，应该可以画一个同样的横线，只要把纵坐标往下移动一点即可

        van.beginPath();
        van.lineTo(10,60);
        van.lineTo(200,60);
        van.lineWidth = 10;// 设置线宽
        van.strokeStyle = 'green'; // 设置画笔的颜色
        van.stroke();
        van.closePath();

    }else{
        alert('不支持canvas');
    }
</script>
</body>
</html>