canvas 圆角矩形填充_canvas-绘制矩形及弧形

谁借莪１个温暖的怀抱￠ 2022-11-06 01:57 481阅读 0赞

矩形是唯一一种可以直接在 2D 上下文中绘制的形状。与矩形有关的方法包括 fillRect() 、strokeRect() 和 clearRect()

这三个方法都能接收 4 个参数：矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度

绘制灰色实心矩形、透明实心矩形

首先， fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属性指定

// 先设置填充色

context.fillStyle = '\#ccc';

// 灰色实心矩形

// 1. 语法： x坐标, y坐标, 宽度, 高度

context.fillRect(10, 10, 50, 50);

// 透明实心矩形

context.fillStyle = 'rgba(0, 0, 0, .5)';

context.fillRect(30, 30, 50, 50);

绘制空心的矩形

语法： x坐标, y坐标, 宽度, 高度

// 1. 语法： x坐标, y坐标, 宽度, 高度

context.strokeStyle = 'rgba(255, 0, 0, 1)';

context.strokeRect(100, 10, 50, 50);

context.strokeStyle = 'rgba(255, 255, 0, 1)';

context.strokeRect(120, 30, 50, 50);

image.png

矩形路径

ctx.rect(x, y, w, h);

坐标：(x, y)； w: 宽度 ， h: 高度

ctx.beginPath();

// 线条颜色

ctx.strokeStyle = 'orange';

// 填充颜色

ctx.fillStyle = 'red';

ctx.lineWidth = 2;

ctx.rect(350, 50, 100, 100);

// 描边

ctx.stroke();

// 填充

ctx.fill();

image.png

绘制弧形

画弧形的语法：

从上一点(起始点) 开始绘制一条曲线，到(x2, y2)位置，并且以(x1, y1)和(x2, y2);为控制点，radius: 弧形半径

ctx.arcTo(x1, y1, x2, y2, radius);

说白话： arcTo会利用起始点 ，(x1, y1), (x2, y2)三个点，所形成的夹角，然后绘制一段与夹角两边相切的圆弧

image.png

弧形可以成为矩形的四个角，使其成为一个圆角矩形

ctx.beginPath();

ctx.lineWidth = 4;

ctx.strokeStyle='blue';

// 起始点

ctx.moveTo(50, 150);

// 左上角

ctx.arcTo(50, 100, 100, 100, 50);

// 右上角

ctx.arcTo(250, 100, 250, 150, 50);

// 右下角

ctx.arcTo(250, 300, 200, 300, 50);

// 左下角

ctx.arcTo(50, 300, 50, 250, 50);

ctx.closePath();

ctx.stroke();

发表评论取消回复

表情：

评论列表（有 0 条评论，481人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序 canvas 绘制圆角矩形

/** * 绘制圆角矩形 * @param {Object} ctx - canvas组件的绘图上下文 * @param {Numbe...

Love The Way You Lie/ 2024年04月17日 05:28/ 0 赞/ 92 阅读

相关说说如何使用 Canvas 绘制基本矩形

HTML5 提供的 canvas 元素，可以让我们使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，我们可以控制其每一像素。canvas 拥有多种绘制路径、矩形

绝地灬酷狼/ 2023年02月17日 12:30/ 0 赞/ 5 阅读

相关 canvas图形绘制：矩形，路径

1，canvas绘制矩形：实心矩形，边框矩形，擦除矩形 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年11月14日 15:58/ 0 赞/ 295 阅读

相关 canvas 圆角矩形填充_canvas-绘制矩形及弧形

矩形是唯一一种可以直接在 2D 上下文中绘制的形状。与矩形有关的方法包括 fillRect() 、strokeRect() 和 clearRect() 这三个方法都能接收 4

谁借莪１个温暖的怀抱￠/ 2022年11月06日 01:57/ 0 赞/ 482 阅读

相关 Canvas学习：绘制矩形

[通过前面教程][Link 1]的学习，我们可以在Canvas中轻易[绘制路径（线段）][Link 1]。这仅仅是Canvas中的一小部分，今天我们来看看在Canvas中怎么绘

柔情只为你懂/ 2022年09月30日 04:59/ 0 赞/ 1436 阅读

相关 canvas应用——圆角矩形图片

前段时间写了一个[canvas应用——将方形图片处理为圆形][canvas] ，最近就想把这个完善一下，所以就再补充一个canvas的圆角矩形处理方式。例子你可以直

本是古典何须时尚/ 2022年05月23日 07:37/ 0 赞/ 271 阅读

相关 canvas绘制圆角头像

如果你想绘制的网页包含一个圆弧形的头像的canvas图片，但是头像本身是正方形的，需要的方法如下：首先，拿到头像在画布上的坐标和宽高：(具体怎么获取不在此做具体介绍)

不念不忘少年蓝@/ 2022年03月25日 03:00/ 0 赞/ 299 阅读

相关 h5 Canvas矩形的绘制

h5 Canvas矩形的绘制 1.绘制矩形api 在Canvas中提供了绘制矩形的API： fillRect(x, y, width, height)：绘制一

淩亂°似流年/ 2022年03月16日 03:46/ 0 赞/ 456 阅读

相关 JavaScript 使用canvas绘制圆角矩形边框

目录分析完整代码如下 > 前言 > 在react项目中需要用到绘制矩形填充, 因为直角矩形不够美观, 需要绘制圆角填充矩形分析 Canva

落日映苍穹つ/ 2021年09月21日 14:22/ 0 赞/ 993 阅读

相关 canvas绘制矩形

canvas提供了三个API，分别是： 1.绘制一个填充的矩形 fillRect(x, y, width, height) 2.绘制一个矩形的边框

旧城等待，/ 2021年07月24日 21:51/ 0 赞/ 486 阅读