Canvas—直线、矩形和圆

悠悠 2021-12-18 07:45 371阅读 0赞

### 文章目录 ###

*  直线
 *  矩形
 *  圆

# 直线 #

const myCanvas = document.getElementById('myCanvas');
    const ctx = myCanvas.getContext('2d');
    ctx.moveTo(0, 0);
    ctx.lineTo(100, 100);
    ctx.stroke();

`moveTo`是移动，可以理解为移动画笔。`lineTo`则是从当前位置往指定位置画一条直线。以上代码的效果如下：

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

看起来没啥问题，可是实际上，第一条直线被画了两次。

const myCanvas = document.getElementById('myCanvas');
    const ctx = myCanvas.getContext('2d');
    ctx.moveTo(0, 0);
    ctx.lineTo(100, 100);
    ctx.strokeStyle = 'red';
    ctx.stroke();
    
    ctx.moveTo(100, 0);
    ctx.lineTo(200, 200);
    ctx.strokeStyle = 'blue';
    cts.stroke();

若两线是分别画的，则应是一条红色，一条蓝色，若是后面的`stroke`方法将两条线都画了一遍，则两条都是蓝色。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 1]

原因是因为`moveTo`、`lineTo`这些操作都是对内存的操作而并没有绘制到屏幕上，调用`stroke`方法的时候才真正的被绘制，因此内存中保存着两条线的路径，因此在第二个`stroke`方法被调用时，第一条直线也被绘制了。

那怎么解决这个问题呢？

const myCanvas = document.getElementById('myCanvas');
    const ctx = myCanvas.getContext('2d');
    ctx.moveTo(0, 0);
    ctx.lineTo(100, 100);
    ctx.strokeStyle = 'red';
    cts.stroke();
    
    ctx.beginPath();    //引入beginPath方法
    ctx.moveTo(100, 0);
    ctx.lineTo(200, 200);
    ctx.strokeStyle = 'blue';
    cts.stroke();

仅需在第一个`stroke`方法之后调用`beginPath`方法即可。这个方法会清空之前保存在内存中的路径。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 2]

# 矩形 #

const myCanvas = document.getElementById('myCanvas');
    const ctx = myCanvas.getContext('2d');
    ctx.strokeRect(100, 100, 150, 100);

![\[外链图片转存失败(img-ljWWK3pD-1562075809430)(http://note.youdao.com/yws/res/15763/486CA587848349F0A4638764447B91E3)\]][img-ljWWK3pD-1562075809430_http_note.youdao.com_yws_res_15763_486CA587848349F0A4638764447B91E3]

尽管可以通过画线的方式画矩形，但调用`strokeRect`方法将会更为方便。

该方法接受4个参数，前两个是所要画的矩形左上角的坐标，后两个则分别是矩形的宽和高。

# 圆 #

const myCanvas = document.getElementById('myCanvas');
    const ctx = myCanvas.getContext('2d');
    ctx.arc(300, 300, 100, 0, 2*Math.PI);
    ctx.stroke();

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]: /images/20211218/14d7697005d048ecb4afa109cbac1576.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 1]: /images/20211218/abaaf4c0699545e49ddba8f4e0dd31dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 2]: /images/20211218/9cf7e1a0da0f4cc0a40b0def91b73bac.png
[img-ljWWK3pD-1562075809430_http_note.youdao.com_yws_res_15763_486CA587848349F0A4638764447B91E3]: /images/20211218/043359a072bb4f11a0b19b2ef3fa2048.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 3]: /images/20211218/f955fb6150d44befa85be02b6a438c21.png