h5 Canvas矩形的绘制

淩亂°似流年 2022-03-16 03:46 449阅读 0赞

h5 Canvas矩形的绘制

##### 1.绘制矩形api #####

在Canvas中提供了绘制矩形的API：

fillRect(x, y, width, height)：绘制一个填充的矩形
    strokeRect(x, y, width, height)：绘制一个矩形的边框
    clearRect(x, y, width, height)：清除指定矩形区域，让清除部分完全透明

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70]  
除此之外还可以通过Canvas中CanvasRenderingContext2D.rect()路径方法创建矩形。这个方法需要配合CanvasRenderingContext2D.fill()绘制一个填充的矩形，CanvasRenderingContext2D.stroke()绘制一个填充的矩形。另外，还可以直接使用Canvas的绘制路径的方法来绘制矩形。其实绘制矩形的方法通过我们自己的思考,会有三种方式,分别是路径绘制矩形、rect()绘制矩形、fillRect()绘制填充矩形和strokeRect()绘制边框机矩形,那我们来先看看怎么使用路径绘制矩形。

##### 2.路径绘制矩形 #####

我们知道矩形是由4条边线围绕而成,因此我们只需要通过绘制4条头尾相连接的线段即可,我们通过学习之后就会发现绘制线段需要使用moveTo()和lineTo()，如此一来，四条线就能拼出一个矩形，然后通过fill()和stroke()绘制出填充和边框矩形。

const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    function drawScreen() {
      context.strokeStyle = '#00';
      context.fillStyle = '#e6c7ff';
      context.lineWidth = 2; // 设置线段宽度
      context.beginPath(); // 开始点
      context.moveTo(30, 30);
      context.lineTo(230, 30);
      context.lineTo(230, 200);
      context.lineTo(30, 200);
      context.lineTo(30, 30);
      context.stroke(); // 进行绘制外边框
    
      context.beginPath();
      context.moveTo(300, 30);
      context.lineTo(500, 30);
      context.lineTo(500, 200);
      context.lineTo(300, 200);
      context.lineTo(300, 30);
      context.fill(); // 进行内容填充
    }
    
    drawScreen();

绘制结果:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 1][]

在Canvas中我们有一个closePath()的方法，在绘制矩形的时候，借助这个方法，我们通过绘制三条线段，就能和起始点闭合，也就绘制出相应的矩形。基于上面的示例，在stroke()和fill()前面添加closePath()即可：

const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    
    function drawScreen() {
      context.strokeStyle = '#00';
      context.fillStyle = '#e6c7ff';
      context.lineWidth = 2; // 设置线段宽度
      context.beginPath(); // 开始点
      context.moveTo(30, 30);
      context.lineTo(230, 30);
      context.lineTo(230, 200);
      context.lineTo(30, 200);
      context.closePath();
      context.stroke(); // 进行绘制外边框
    
      context.beginPath();
      context.moveTo(300, 30);
      context.lineTo(500, 30);
      context.lineTo(500, 200);
      context.lineTo(300, 200);
      context.closePath();
      context.fill(); // 进行内容填充
    }
    
    drawScreen();

使用上面的绘制方法,同样能够达到绘制矩形的效果.

##### 3.rect()绘制矩形 #####

rect()也是Canvas中路径的一个方法，也需要配合fill()和stroke()。rect() 具有四个参数

rect(x, y, width, height)

其中x和y是矩形左上角的坐标点，width是矩形的宽度，height是矩形的高度。接下来，看如何使用rect()绘制矩形：

const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    function drawScreen () {
      context.strokeStyle = '#00';
      context.fillStyle = '#9f9';
      context.lineWidth = 2;
    
      context.beginPath();
      context.rect(30,30,200,200);
      context.stroke();
    
      context.beginPath();
      context.rect(300,30,200,200);
      context.fill();
    
    }
    
    drawScreen();

显示效果如下:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 2][]

##### 4.fillRect()绘制填充矩形和strokeRect()绘制边框矩形 #####

##### fillRect()绘制填充矩形 #####

前面两种方法是通过Canvas的路径方法绘制填充和边框矩形。那么在Canvas中可以直接通过fillRect()绘制一个矩形：

fillRect(x,y,width,height)

和rect()一样，x和y是矩形左上角的坐标点，width是矩形宽度，height是矩形高度：

const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    function drawScreen () {
      context.fillStyle = '#e0f'
      context.fillRect(30,30,200,200);
    }
    
    drawScreen();

##### strokeRect()绘制边框矩形 #####

strokeRect()和fillRect()方法类似，只不过不同的是，strokeRect()绘制的是边框矩形：

const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    function drawScreen () {
      context.lineWidth = 4;
      context.strokeStyle = '#e0f'
      context.strokeRect(30,30,200,200);
    }
    
    drawScreen();

##### 清除矩形 #####

在Canvas中有一个clearRect()可以指定矩形区域内（以 点 (x, y) 为起点，范围是(width, height) ）所有像素变成透明，并擦除之前绘制的所有内容的方法：

context.clearRect(x, y, width, height);

比如有时候需要清除画布，可以这样使用：

context.save();
    context.clearRect(0, 0, canvas.width, canvas.height);

##### 5.同时绘制有边框和填充色的矩形 #####

前面我们看到的都是单独绘制边框或填充的矩形。那么将这两种结合在一起，我们就可以很容易的绘制出同时带有边框和填充色的矩形：

const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    function drawScreen () {
      context.lineWidth = 4;
      context.fillStyle = '#aa0';
      context.strokeStyle = '#9f9';
    
      // 连线方式
      context.beginPath();
      context.moveTo(10,10);
      context.lineTo(110,10);
      context.lineTo(110,110);
      context.lineTo(10,110);
      context.closePath();
      context.stroke();
      context.beginPath();
      context.moveTo(12,12);
      context.lineTo(108,12);
      context.lineTo(108,108);
      context.lineTo(12,108);
      context.closePath();
      context.fill();
    
      // rect方式
      context.beginPath();
      context.rect(120,10,100,100);
      context.closePath();
      context.stroke();
      context.beginPath();
      context.rect(122,12,96,96);
      context.fill();
    
      // strokeRect，fillRect方法
      context.strokeRect(240,10,100,100);
      context.fillRect(242,12,96,96);
    }
    
    drawScreen();

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 3][]

##### 6.绘制折角或圆角矩形 #####

如果我们要绘制一个折角的矩形或者圆角的矩形时，就需要借助lineJoin这个属性。不过有一点需要特别注意，lineJoin只适合于线段连接触端的样式控制。也就是说，他只适合边框矩形，如果没有边框的矩形是不生效的。话又说回来，如果需要一个填充的矩形需要有折角或圆角的效果时，就需要在填充矩形上加一个与填充色相同的边框。

const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    function drawScreen () {
      context.lineWidth = 10;
      context.strokeStyle = '#f99'
    
      context.lineJoin = "bevel";
      context.strokeRect(10,10,200,200);
    
      context.lineJoin = "round";
      context.strokeRect(250,10,200,200);
    }
    
    drawScreen();

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 4][]

现在绘制成了已经有边角的矩形,如果我们需要绘制有填充颜色的图形时,只需要添加fillStyle属性即可

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 5][] 不管是使用Canvas中的路径方法还是自带绘制矩形的API，都可以通过fillStyle和strokeStyle来给矩形设置样式，比如填充颜色和边框颜色。 \#\#\#\#\# 7.通过JS手动绘制矩形 学习了以上基础知识,我们现在使用这些东西来实现使用鼠标实时绘制图形的功能,我们需要确认的是 >1.监听鼠标事件 2.鼠标按下事件 3.鼠标移动事件 4.鼠标抬起事件

然后根据这些事件分别对应去实现canvas界面的修改  
1.添加监听事件

canvas.addEventListener('mousedown', mouseDown, false);
      canvas.addEventListener('mouseup', mouseUp, false);
      canvas.addEventListener('mousemove', mouseMove, false);

2.鼠标按下事件-mouseDown()函数  
mouseDown()函数是监听鼠标在画布上按下时需要做的事情：

function mouseDown(e) {
        rect.startX = e.pageX - this.offsetLeft;
        rect.startY = e.pageY - this.offsetTop;
        drag = true;
    }

当鼠标按下时，函数mouseDown()通过e.pageX和e.pageY找到e的位置，然后减去距离Canvas画布左边和顶部的距离。最后设置拖动drag为true。

3.鼠标抬起事件-mouseUp()函数

function mouseUp(){
        drag = false;
    }

这个函数很简单，当用户释放鼠标时，拖动drag设回false。表示鼠标没有在拖动状态。

4.鼠标移动事件-mouseMove()函数

function mouseMove(e) {
        if (drag) {
            rect.w = (e.pageX - this.offsetLeft) - rect.startX; // 获取矩形的width
            rect.h = (e.pageY - this.offsetTop) - rect.startY ; // 获取矩形的height
            ctx.clearRect(0,0,myCanvas.width,myCanvas.height); // 清空canvas
            drawRect("fill"); // 调用绘制图形
        }
    }

mouseMove()函数才是关键的一步。在mouseMove()函数中首先检测drag，如果是true意味着想要绘制一个矩形，如果是false只是意味着用户只在画布上移动鼠标，并不想画矩形。如果drag是true，通过鼠标跟随位置计算出矩形的宽度和高度。如果要做到这一点，我们需要减去鼠标当前的位置。这样得到想要绘制矩形的width和height，但在绘制之前，需要通过clearRect()方法，将Cavans画布清除干净。然后再调用绘制矩形的函数drawRect()。

5.绘制矩形的方法-drawRect

function drawRect(style){
        if (style==="fill"){ // 控制绘画填充的还是边框矩形
          ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
        }
        if (style==="stroke"){
          ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
        }
    }

drawRect()函数是真正绘制矩形的，在这个函数中传了一个style参数。如果是fill绘制一个填充矩形，如果是stroke将绘制一个边框矩形。

height="600" width="100%" scrolling="no" title="h5Rect" src="//codepen.io/suwu150/embed/bZGOBj/?height=265&theme-id=0&default-tab=js,result" allowfullscreen="true"> See the Pen [h5Rect][] by suwu150 ( [@suwu150][suwu150]) on [CodePen][].

##### 总结 #####

本文介绍了在Canvas中绘制矩形的几种方法：

1.使用Canvas中的路径moveTo()、lineTo()配合fill()和stroke()绘制矩形  
2.使用Canvas中的rect(x,y,width,height)配合fill()和stroke()绘制矩形  
3.使用fillRect(x,y,width,height)绘制一个填充的矩形  
4.使用strokeRect(x,y,width,height)绘制一个边框矩形  
5.另外还可以通过clearRect(x,y,width,height)清除画布。在Canvas中除了矩形之外，还有圆形之类的。

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 6][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70]: /images/20220316/81d7617142fa4a7ea2f02f1dd7078d63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 1]: /images/20220316/c701b4cf3f924bf694b78098dfb63204.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 2]: /images/20220316/c2b977a56b0845c28e8be548d7bee85f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 3]: /images/20220316/36b437fb17e64f6e9d51e3ef3c551328.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 4]: /images/20220316/bc3fecac59db4e75a41dd297c2d7040f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 5]: /images/20220316/15a3cc8c1a3a4536b6be37b517b31ac4.png
[h5Rect]: https://codepen.io/suwu150/pen/bZGOBj/
[suwu150]: https://codepen.io/suwu150
[CodePen]: https://codepen.io
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 6]: /images/20220316/950e6dc8eb6f4bb8a82ac5ec3c4cad12.png