canvas绘制直线、折线、矩形与多边形

最新推荐文章于 2024-06-08 07:03:21 发布

静茹秋叶

最新推荐文章于 2024-06-08 07:03:21 发布

阅读量1.1w

点赞数 4

分类专栏： js 文章标签： canvas javascript 绘制图形

本文链接：https://blog.csdn.net/zhang_cherry/article/details/122397110

版权

js 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

1、canvas的width和height属性与style中的width和height的区别

canvas是html5新增的绘图工具。通过canvas标签创建画布后，它有三个基本要素：id、宽度和高度。
特别注意的是：canvas的宽度和高度不能在style里面设置，因为此时设置的是div的宽度和高度，canvas会使用默认的宽度（300px），高度（150px）。

<canvas id="canvas" width="200px" height="200px" style="border: #138eee solid 1px;">

创建了一个宽200px,高200px的canvas画布
若是在style里面设置宽和高，打印canvas的宽度和高度，会得到默认值

<canvas id="canvas"  style="width: 500px;height:500px;border: #138eee solid 1px;"></canvas>

let canvasEle = document.getElementById('canvas')
console.log(canvasEle.width) // 300
console.log(canvasEle.height) // 150

2、绘制直线

canvas画布采用的是W3C坐标系，与我们通常使用的数学坐标系是不同的。它主要是Y轴的正方向向下。
数学坐标系与W3C坐标系
通过getContext(‘2d’)，可以得到画布的上下文（假设为ctx），它有
moveTo(x1, y1)：表示将画笔移动到该点
lineTo(x2, y2)：表示画笔画到(x2, y2)点
stroke()：表示画笔开始绘制图形
例如：画一条从(50, 50)到（100, 100）的直线

   let canvasEle = document.getElementById('canvas')
   let ctx = canvasEle.getContext('2d')
   ctx.moveTo(50, 50)
   ctx.lineTo(100, 100)
   ctx.stroke()

绘制直线

3、绘制折线

折线是由多条直线组成的，所以直接按照绘制直线的方法，可以绘制出一条折线。
例如：（50, 50) -> (100, 100) -> (100, 150) -> (150, 200)

   let canvasEle = document.getElementById('canvas')
   let ctx = canvasEle.getContext('2d')
   ctx.moveTo(50, 50)
   ctx.lineTo(100, 100)
   ctx.lineTo(100, 150)
   ctx.lineTo(150, 200)
   ctx.stroke()

绘制折线

4、绘制矩形

绘制矩形也可以像绘制直线和折线一样，采用moveTo和lineTo方法，不过官网已经封装了直接绘制矩形的方法，有strokeRect、fillRect、rect方法。

4.1 绘制描边矩形

描边矩形：不填充颜色，边缘可以设置颜色。
主要使用strokeStyle属性和strokeRect()方法

strokeStyle: 可以设置画笔的颜色，接收16进制的颜色值、rgb值、rgba值等
strokeRect(x, y, width, height): 其中x,y是指矩形的左上角坐标，width是矩形的宽，height是矩形的高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制矩形</title>
</head>
<body>
    <canvas id="canvas" width="200px" height="200px" style="border: #138eee solid 1px;"></canvas>
    <script>
        let canvasEle = document.getElementById('canvas')
        let ctx = canvasEle.getContext('2d')
        ctx.strokeStyle = 'hotPink'
        ctx.strokeRect(50, 50, 100, 100)
        ctx.stroke()
    </script>
</body>
</html>

绘制描边矩形

4.2 绘制填充矩形

填充矩形：对矩形填充颜色。
主要使用fillStyle属性和fillRect()方法

fillStyle: 可以设置画笔的颜色，接收16进制的颜色值、rgb值、rgba值等
fillRect(x, y, width, height): 其中x,y是指矩形的左上角坐标，width是矩形的宽，height是矩形的高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制矩形</title>
</head>
<body>
    <canvas id="canvas" width="200px" height="200px" style="border: #138eee solid 1px;"></canvas>
    <script>
        let canvasEle = document.getElementById('canvas')
        let ctx = canvasEle.getContext('2d')
        ctx.fillStyle = 'blue'
        ctx.fillRect(50, 50, 100, 100)
    </script>
</body>
</html>

绘制填充矩形

4.3 描边矩形+填充矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制矩形</title>
</head>
<body>
    <canvas id="canvas" width="200px" height="200px" style="border: #138eee solid 1px;"></canvas>
    <script>
        let canvasEle = document.getElementById('canvas')
        let ctx = canvasEle.getContext('2d')
        ctx.strokeStyle = 'red'
        ctx.strokeRect(50, 50, 100, 100)
        ctx.fillStyle = 'blue'
        ctx.fillRect(50, 50, 100, 100)
    </script>
</body>
</html>

描边矩形+填充矩形

5、绘制多边形

绘制多边形采用另外的API

ctx.beginPath()：开始一条新路径
ctx.closePath()：关闭路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制矩形</title>
</head>
<body>
    <canvas id="canvas" width="200px" height="200px" style="border: #138eee solid 1px;"></canvas>
    <script>
        let canvasEle = document.getElementById('canvas')
        let ctx = canvasEle.getContext('2d')
        ctx.beginPath()
        ctx.lineTo(50, 50)
        ctx.lineTo(100, 25)
        ctx.lineTo(200, 60)
        ctx.lineTo(150, 100)
        ctx.lineTo(200, 200)
        ctx.closePath()

        ctx.strokeStyle = 'pink'
        ctx.stroke()
    </script>
</body>
</html>

在这里插入图片描述

静茹秋叶

关注

4
点赞
踩
21

收藏

觉得还不错? 一键收藏
2
评论
canvas绘制直线、折线、矩形与多边形

1、canvas的width和height属性与style中的width和height的区别canvas是html5新增的绘图工具。通过canvas标签创建画布后，它有三个基本要素：id、宽度和高度。特别注意的是：canvas的宽度和高度不能在style里面设置，因为此时设置的是div的宽度和高度，canvas会使用默认的宽度（300px），高度（150px）。<canvas id="canvas" width="200px" height="200px" style="border: #138
复制链接

扫一扫