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

2024-02-28 04:09| 来源: 网络整理| 查看: 265

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

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

创建了一个宽200px,高200px的canvas画布若是在style里面设置宽和高，打印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> 绘制矩形 let canvasEle = document.getElementById('canvas') let ctx = canvasEle.getContext('2d') ctx.strokeStyle = 'hotPink' ctx.strokeRect(50, 50, 100, 100) ctx.stroke()

绘制描边矩形

4.2 绘制填充矩形

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

fillStyle: 可以设置画笔的颜色，接收16进制的颜色值、rgb值、rgba值等fillRect(x, y, width, height): 其中x,y是指矩形的左上角坐标，width是矩形的宽，height是矩形的高 DOCTYPE html> 绘制矩形 let canvasEle = document.getElementById('canvas') let ctx = canvasEle.getContext('2d') ctx.fillStyle = 'blue' ctx.fillRect(50, 50, 100, 100)

绘制填充矩形

4.3 描边矩形+填充矩形 DOCTYPE html> 绘制矩形 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)

描边矩形+填充矩形

5、绘制多边形

绘制多边形采用另外的API

ctx.beginPath()：开始一条新路径ctx.closePath()：关闭路径 DOCTYPE html> 绘制矩形 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()

在这里插入图片描述

【本文地址】

公司简介

联系我们