canvas快速入门1:canvas的线

1. canvas的线

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvastitle>
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是 "绘制",即前面的操作都是用来告诉这个画笔要绘制成什么样子,这句才是画

canvas快速入门1:canvas的线_第1张图片

  • 再画一条直线,绿色的,线宽10。
    改一下纵坐标y的值,然后改一下颜色就OK了。实际上:
        ....
        ....
//紧接上面代码,一个神奇的现象,按照上面同样的方法,
//应该可以画一个同样的横线,只要把纵坐标往下移动一点即可
        van.lineTo(10,60);
        van.lineTo(200,60);
        van.lineWidth = 10;// 设置线宽
        van.strokeStyle = 'green'; // 设置画笔的颜色
        van.stroke();// 绘制

canvas快速入门1:canvas的线_第2张图片
看样子像是后面的设置画笔的颜色覆盖了上面的颜色,而且点与点之间按顺序自动连接了。实际上就是这个样子的,如何能让他像人一样画完一条线抬笔在画另一条直线
解决:每个划线的动作前后加上beginPath() / closePath().
完整代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvastitle>
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>

canvas快速入门1:canvas的线_第3张图片
这一节就结束了,看着挺多实际就30多行代码。而且,想一想这只是会画线段了吗?当然不是,我们实际已经可以画各种多边形了,各种多边形也是有线段组成的嘛。

小结

  • getContext('2d) 获取画布上下文
  • moveTo(x, y) 把画笔放到坐标(x,y)处
  • lineTo(x, y) 把线画到(x, y)坐标处
  • lineWidth [ = number] 设置线宽
  • strokeStyle [=color] 设置线的颜色、画笔的颜色
  • stroke() 绘画,执行画的动作
  • beginPath() 声明一次绘制的开始
  • closePath() 此次绘制结束

8个API多练习一下,后面会经常经常用到。

你可能感兴趣的:(HTML)