自学canvas

最新推荐文章于 2024-08-06 21:30:42 发布

著名退堂鼓手

最新推荐文章于 2024-08-06 21:30:42 发布

阅读量732

点赞数 14

文章标签： java 前端服务器

本文链接：https://blog.csdn.net/m0_61818318/article/details/134585640

版权

1.创建canvas和content

第一种方式

// 2、获取canvas元素 const canvas = document.getElementById("canvas");

// 3、获取绘制上下文 const ctx = canvas.getContext("2d");

第二种方式

通过js生成

const canvas = document.createElement('canvas');

document.body.append(canvas);

canvas.width = 400

canvas.height = 400

const ctx = canvas.getContext('2d');

ctx.fillRect(100,100,200,100)

</script>

2.画布区域的特点

canvas是一个行内元素

canvas可以使用width和height设置区域宽高（默认宽高是300*150）

canvas可以使用style来设置宽高，但是width和height效果有所不同

（1）坐标系

每个画布中都有一个坐标系统，以左上角为（0，0）原点

（2）画布区域

使用width和height属性控制的区域

这个区域有多大，其包含的坐标系就有多大。

表示一个400*400的坐标系

（3）放置区域

使用style样式控制区域大小

画布区域中绘制的图形最终会在放置区域中展示。

默认放置区域与画布区域相同

放置区域如果比画布区域大或者小，画布中的图形就会按照比例放大或者缩小（图像失真）

3.绘制图形

（1）绘制矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <script>
        const canvas = document.createElement('canvas');
        document.body.append(canvas);
        canvas.width = 400
        canvas.height = 400
        const ctx = canvas.getContext('2d');
        ctx.fillRect(100,100,200,100)
    </script>
</body>
</html>

ctx.strokeRect(x,y,width,height) 填充矩形

ctx.fillRect(100,100,200,100)空心矩形

ctx.rect(x,y,width,weight)设置矩形路径，默认没有效果需要配合fillrect，和strokeRect使用

使用fillStyle设置填充的颜色

使用strokeStyle设置描边的颜色

使用lineWidth设置描边边框的粗细

‼️注意：一定要在绘制图形之前设置

（2）beginPath方法

stroke（）或fill（）默认会对之前所有绘制的路径进行一个处理

当我们需要只对当前制定的图形路径进行绘制时

就可以使用ctx.beginPath（）方法，为不同的路径设置分组

此时就只有对紧邻的路径进行一个绘制

（3）圆角矩形

使用ctx.roundRect（x,y,width,height,r）方法绘制圆角矩形

<script>
        (()=>{
            const canvas = document.createElement('canvas');
            document.body.append(canvas);
            canvas.width = 400
            canvas.height = 400
            const ctx = canvas.getContext('2d');
            ctx.roundRect(20,20,100,100,20)
            ctx.stroke()
        })()
      
    </script>

此方法绘制了一个圆角为20的矩形

半径r有多种写法，可以实现四个圆角单独设置

r：[10] || 10

r：[10,20]. 左上右下，左下右上

r：[10,20,30]

r：[10,20,30,40]

（4）绘制直线和折线

使用ctx.moveTo(x,y)将画笔放置到指定的坐标位置（起点）

使用ctx.lineTo(x,y)从上一个点绘制直线路径到指定的点

*上一个点可以是moveTo指定的点

*上一个点也可以是上一次lineTo指定的点，也就是可以多个lineTo连续使用形成折线

（5）线条API

ctx.lineWidth属性，设置线条的粗细

ctx.lineCap属性，设置线条端点的样式（butt平的-默认效果）（round圆的）（square平的-端点处增加了矩形，视觉效果变长了）

ctx.lineJoin属性，设置折线连接处的样式（miter尖的-默认）round（圆的）（bevel平的）

ctx.miterLimit属性，设置折线形成的尖限制

当线条比较粗，折线夹角比较小时候，lineJoin的miter设置形成的尖会比较长

可以利用该属性控制尖的长短

（6）清除画布

大多数情况下，当canvas配合js动画实现效果时默认每次都是在之前的基础上进行绘制所以应该清楚上一次效果重新绘制

使用ctx.clearRect（x,y,width,height）方法，清除画布中指定的矩形区域

如果width和height等于画布宽高，就相当于清楚整个画布。否则清楚画布的一部分

清楚画布的本质是将制定的矩形区域透明度设置为0，之前的路径依然存在。

如果没有配合beginPath，而是继续stoke（）和fill（）清楚效果重现

（7）closePath方法

多个连续线条闭合的区域，是可以用fill（）进行填充的

如果需要尾节点闭合，可以使用ctx.closePath（）方法

（8）绘制圆弧

arc（x,y,r,startAngle,endAngle,[dir]）

xy圆点坐标

r半径

startAngle其实绘制的角度。默认圆点x轴右侧半径位置为绘制的起始点（0度点）。角度方向是顺时针的。

endAngle结束点的角度

dir绘制方向。false顺时针（默认），true逆时针方向（设计圆弧时，用的是角度，传递参数时，传递的是弧度）

1（角度）=Math.PI/180（弧度）

360（角度）=Math.PI*2

arcTo（x1,y1,x2,y2,r）

是由三个控制点实现圆弧的绘制

moveTo或者上一次图形结束点为第一个点

x1,y1第二个点

x2,y2第三个点

按照1，2，3，的顺序进行连线，两条线会形成一个夹角。

根据r绘制圆弧，保证和两条线相切

（9）绘制椭圆

使用ctx.ellipse(x,y,rx,ry,rotate,startAngle,endAngle,dir)方法绘制椭圆

x,y圆点坐标

rx，ry x轴半径和y轴半径

rotate x轴旋转角度（顺时针）

startAngle起始点角度默认0度，三点钟方向

endAngel终点角度

dir绘制方向，false顺时针，true逆时针

（10）绘制曲线

canvas提供了一种绘制曲线的方式：贝塞尔曲线

二次贝塞尔曲线，三次贝塞尔曲线

有一个起点一个终点

在两点之间，有多个控制点（有一个控制点被称为二次贝塞尔曲线，有两个控制点被称为三次贝塞尔曲线）

从起点经过控制点，到终点依次连线

提供一个参数t在[0，1]范围变化

每个t都存在以下情况

在任意线段中，从起点到终点，存在一个中间点，使得前部分线段/整条线段= t

对每条线段的这些点，再一次链接，形成了一批新的线段比之前一批少一条

在新的一批线段中，依然存在符合比例t的那个点

重复之前连线，找点操作

直到找到最后一个点，就是次贝塞尔曲线，在当前比例t时，曲线的点

当t在0-1范围变化时，每次都有一个这样的点，这些线点链接后就形成了贝塞尔曲线

使用ctx.quadraticCurveTo(cx1,cy1,ex,ey)方法绘制二次贝塞尔曲线

cx1，cy1控制点坐标

ex，ey终点坐标

起点的坐标时moveTo设置。或者是上一次绘图的结尾

使用ctx.bezierCurveTo(cx1.cy1.cx2，cy2，ex，ey)方法绘制三次贝塞尔曲线

（11）绘制文本

使用ctx.fillText（textStr，x，y，[maxwidth]）方法，绘制填充文本

使用ctx.strokeText（）方法，绘制描边文本

textStr文本内容

x，y，文本坐标位置

maxWidth设置文本最大宽度，如果文本宽度>最大宽度，就会被压缩，压缩子啊maxwidth范围内

使用ctx.font属性，设置文本样式（粗体，斜体，大小，字体）

必须设置字体，否则其他样式无效

使用ctx.textAlign属性，设置基于锚点水平位置（left，center，right）

使用ctx.textbaseline属性，设置基于锚点的垂直位置（bottom，middle，top）

著名退堂鼓手

关注

14
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
自学canvas

第一种方式// 2、获取canvas元素 const canvas = document.getElementById("canvas");// 3、获取绘制上下文 const ctx = canvas.getContext("2d");第二种方式通过js生成<script></script>
复制链接

扫一扫