h5 Canvas矩形的绘制

Posted 2022-09-06 suwu150

h5 Canvas矩形的绘制

1.绘制矩形api

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

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

除此之外还可以通过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();

绘制结果:

在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();

显示效果如下:

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();

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();

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

不管是使用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) 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中除了矩形之外，还有圆形之类的。

---