HTML5中Canvas学习笔记:Canvas

目录

一、HTML中Canvas画图strokeStyle 和 fillStyle 的区别是什么?

二、如何设置一幅canvas图中某个颜色透明?

三、H5 canvas中strokeRect参数如果是小数,如何处理?

四、H5 Canvas中如何画圆角矩形框?



一、HTML中Canvas画图strokeStyle 和 fillStyle 的区别是什么?

在HTML的Canvas元素中,strokeStyle和fillStyle是用于设置绘图的线条颜色和填充颜色的属性。

  • strokeStyle:用于设置绘图的线条颜色。它可以接受各种颜色值,比如CSS颜色名称、RGB、RGBA、十六进制等。默认值为"#000000"(黑色)。

  • fillStyle:用于设置绘图的填充颜色。它也可以接受各种颜色值,同样可以使用CSS颜色名称、RGB、RGBA、十六进制等。默认值为"#000000"(黑色)。

区别:

  1. strokeStyle用于设置绘制图形边框的颜色,而fillStyle用于设置填充图形内部的颜色。

  2. 当使用绘图方法绘制一个形状时,可以使用strokeStyle设置形状的边框颜色,使用fillStyle设置形状的填充颜色。如果只设置了strokeStyle而没有设置fillStyle,那么形状将只有边框而没有填充颜色。如果只设置了fillStyle而没有设置strokeStyle,则形状将只有填充颜色而没有边框。

  3. strokeStyle和fillStyle可以接受相同的颜色值类型,比如CSS颜色名称、RGB、RGBA、十六进制,所以可以使用相同的颜色值来设置边框和填充颜色。但是也可以使用不同的颜色值来设置边框和填充颜色,以达到不同的效果。

总结:strokeStyle用于设置线条颜色,fillStyle用于设置填充颜色,它们是Canvas绘图中设置边框和填充的重要属性。通过设置不同的颜色值,可以实现不同的绘图效果。

二、如何设置一幅canvas图中某个颜色透明?

要设置Canvas图中某个颜色为透明,可以通过以下步骤:

  1. 获取Canvas的上下文对象:使用getContext方法获取Canvas的上下文对象,例如:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
  1. 使用getImageData方法获取Canvas上的像素数据:使用getImageData方法获取Canvas上指定区域的像素数据。需要指定图像数据的起始点和宽度、高度。例如,获取整个Canvas的像素数据:
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  1. 遍历像素数据并修改颜色值:通过遍历像素数据,找到要设置为透明的颜色,并将其对应的颜色值修改为透明的颜色值(RGBA中的A值为0)。像素数据是一个一维数组,每四个元素表示一个像素的RGBA值。例如,将颜色值为红色的像素设置为透明:
for (var i = 0; i < imageData.data.length; i += 4) {var red = imageData.data[i];var green = imageData.data[i + 1];var blue = imageData.data[i + 2];if (red === 255 && green === 0 && blue === 0) { // 判断颜色是否为红色imageData.data[i + 3] = 0; // 设置透明度为0}
}
  1. 将修改后的像素数据重新绘制到Canvas上:使用putImageData方法将修改后的像素数据重新绘制到Canvas上。例如:
ctx.putImageData(imageData, 0, 0);

这样就可以将Canvas图中指定的颜色设置为透明。需要注意的是,Canvas的像素数据是以左上角为原点,水平向右为x轴正方向,垂直向下为y轴正方向。同时,Canvas中的图像数据是存储在图像数据对象ImageData中的,通过修改ImageData的像素数据可以实现对Canvas图的修改。

三、H5 canvas中strokeRect参数如果是小数,如何处理?

在HTML5的Canvas中,strokeRect方法用于绘制一个矩形的边框。它接受四个参数,分别是矩形的左上角x坐标、左上角y坐标、宽度和高度。

如果传入的参数是小数,Canvas会将小数值向下取整,然后进行绘制。也就是说,小数值会被自动转换为整数。

例如,如果将strokeRect的参数设置为小数值:

ctx.strokeRect(10.5, 20.7, 30.9, 40.2);

Canvas会将参数转换为整数值:

ctx.strokeRect(10, 20, 30, 40);

所以无论参数是小数还是整数,Canvas都会将其转换为整数值进行绘制。如果需要绘制精确的小数值矩形,可以通过使用其他方法,如lineTo和stroke来手动绘制。

四、H5 Canvas中如何画圆角矩形框?

在HTML5的Canvas中,并没有直接的命令可以绘制圆角矩形框。但是可以通过一些方法来实现绘制圆角矩形框的效果:

  1. 使用arcTo方法:arcTo方法可以绘制一段弧线,通过组合多个弧线可以实现圆角矩形。具体步骤如下:
    a. 使用moveTo方法将画笔移动到矩形的起始点。
    b. 使用lineTo方法和arcTo方法绘制四条边和四个圆角。
    c. 使用stroke或fill方法绘制矩形。

    下面是一个绘制圆角矩形的示例:

    function drawRoundRect(ctx, x, y, width, height, radius) {ctx.beginPath();ctx.moveTo(x + radius, y);ctx.lineTo(x + width - radius, y);ctx.arcTo(x + width, y, x + width, y + radius, radius);ctx.lineTo(x + width, y + height - radius);ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);ctx.lineTo(x + radius, y + height);ctx.arcTo(x, y + height, x, y + height - radius, radius);ctx.lineTo(x, y + radius);ctx.arcTo(x, y, x + radius, y, radius);ctx.stroke();
    }
    
  2. 使用quadraticCurveTo方法:quadraticCurveTo方法可以绘制二次贝塞尔曲线,通过组合多个二次贝塞尔曲线也可以实现圆角矩形。具体步骤如下:
    a. 使用moveTo方法将画笔移动到矩形的起始点。
    b. 使用quadraticCurveTo方法绘制四条边的圆角弧线。
    c. 使用stroke或fill方法绘制矩形。

    下面是一个使用quadraticCurveTo方法绘制圆角矩形的示例:

    function drawRoundRect(ctx, x, y, width, height, radius) {ctx.beginPath();ctx.moveTo(x + radius, y);ctx.lineTo(x + width - radius, y);ctx.quadraticCurveTo(x + width, y, x + width, y + radius);ctx.lineTo(x + width, y + height - radius);ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);ctx.lineTo(x + radius, y + height);ctx.quadraticCurveTo(x, y + height, x, y + height - radius);ctx.lineTo(x, y + radius);ctx.quadraticCurveTo(x, y, x + radius, y);ctx.stroke();
    }
    

这两种方法都可以用来绘制圆角矩形框。具体选择哪种方法取决于个人的需求和偏好。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/78706.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式行为型——迭代器模式

什么是迭代器模式 迭代器模式&#xff08;Iterator Pattern&#xff09;属于行为型模式&#xff0c;其提供一种方法顺序访问一个聚合对象中的各种元素&#xff0c;而又不暴露该对象的内部表示&#xff0c;即不需要知道集合对象的底层表示。编程环境中非常常用的设计模式。 迭代…

【驱动开发day8作业】

作业1&#xff1a; 应用层代码 #include <stdlib.h> #include <stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <unistd.h> #include <string.h> #include <sys/ioctl.h>int main(int…

python --windows获取启动文件夹路径/获取当前用户名/添加自启动文件

如何使用Python获取计算机用户名 一、Python自带的getpass模块可以用于获取用户输入的密码&#xff0c;但是它同样可以用来获取计算机用户名。 import getpassuser getpass.getuser() print("计算机用户名为&#xff1a;", user)二、使用os模块获取用户名 Python的…

在windows配置redis的一些错误及解决方案

目录 Unable to connect to Redis; nested exception is io.lettuce.core.RedisConnectionException:用客户端Redis Desktop Manager一样的密码端口&#xff0c;是可以正常连接的&#xff0c;但是运行java程序之后使用接口请求就会报错 Unable to connect to Redis; nested e…

计算机视觉与图形学-神经渲染专题-Seal-3D(基于NeRF的像素级交互式编辑)

摘要 随着隐式神经表示或神经辐射场 (NeRF) 的流行&#xff0c;迫切需要与隐式 3D 模型交互的编辑方法&#xff0c;以完成后处理重建场景和 3D 内容创建等任务。虽然之前的作品从不同角度探索了 NeRF 编辑&#xff0c;但它们在编辑灵活性、质量和速度方面受到限制&#xff0c;无…

chapter14:springboot与安全

Spring Boot与安全视频 Spring Security, shiro等安全框架。主要功能是”认证“和”授权“&#xff0c;或者说是访问控制。 认证&#xff08;Authentication&#xff09;是建立在一个声明主体的过程&#xff08;一个主体一般指用户&#xff0c;设备或一些可以在你的应用程序中…

Spring Boot介绍--快速入门--约定优于配置

文章目录 SpringBoot 基本介绍官方文档Spring Boot 是什么?SpringBoot 快速入门需求/图解说明完成步骤快速入门小结 Spring SpringMVC SpringBoot 的关系总结梳理关系如何理解-约定优于配置 SpringBoot 基本介绍 官方文档 官网: https://spring.io/projects/spring-boot 学习…

图像 检测 - DETR: End-to-End Object Detection with Transformers (arXiv 2020)

图像 检测 - DETR: End-to-End Object Detection with Transformers - 端到端目标检测的Transformers&#xff08;arXiv 2020&#xff09; 摘要1. 引言2. 相关工作2.1 集预测2.2 Transformers和并行解码2.3 目标检测 3. DETR模型References 声明&#xff1a;此翻译仅为个人学习…

Android开源 Skeleton 骨架屏

目录 一、简介 二、效果图 三、引用 Skeleton 添加jitpack 仓库 添加依赖: 四、使用 Skeleton 1、VIew 骨架屏使用 ViewSkeletonScreen 2、列表类View 骨架屏 RecyclerViewSkeletonScreen、GridViewSkeletonScreen、 ListViewSkeletonScreen 一、简介 骨架屏的作用是…

无人机电力巡检方案在电网安全与维护中的应用

目前&#xff0c;无人机技术已经在各行各业都有广泛的应用&#xff0c;其中之一就是在电力巡检中的应用。无人机电力巡检方案以其高效、安全、精准的特点&#xff0c;为电网安全与维护带来了重大突破和进步。 一、无人机电力巡检方案是高效巡检的利器 传统的电力巡检方式需要人…

K8s集群安全机制

1.访问K8s集群的时候&#xff0c;需要经过三个步骤完成具体操作 &#xff08;1&#xff09;认证&#xff08;2&#xff09;鉴权&#xff08;授权&#xff09;&#xff08;3&#xff09;准入控制 进行访问的时候&#xff0c;过程中都要经过apiserver&#xff0c;apiserver做统…

C++拷贝wstring到wchar_t*中踩的坑

使用wchar_t指针将wstring中的数据拿出来&#xff0c;发现释放的时候异常&#xff0c;不是深拷贝和浅拷贝的问题 首先先看看string怎末复制到char中&#xff0c;代码如下 string str1"\"0.2.0\"";char* tnew char[str.size()1];memcpy(t, str1.c_str(), s…

SPI通信协议

简介 SPI有主、从两种模式&#xff0c;通常由一个主模块和一个或多个从模块组成&#xff08;SPI不支持多主机&#xff09;&#xff0c;主 模块选择一个从模块进行同步通信&#xff0c;从而完成数据的交换。提供时钟的为主设备&#xff08;Master&#xff09;&#xff0c;接 收时…

arm交叉编译lmbench

一、下载lmbench www.bitmover.com/lmbench 官网下载&#xff0c;http://www.bitmover.com/lmbench/lmbench3.tar.gz 我没有下载下来&#xff0c;找的别人的百度云下载 链接: https://pan.baidu.com/s/1tGo1clCqY-jQPN8G1eWSsg 提取码: f6jd 二、修改makefile 修改三个文件…

Vue2:组件基础(下)

Vue2&#xff1a;组件基础&#xff08;下&#xff09; Date: April 12, 2023 Sum: props验证、计算属性、自定义时间、组件上的v-model、任务列表案例 Tags: * 目标&#xff1a; 能够知道如何对 props 进行验证 能够知道如何使用计算属性 令能够知道如何为组件自定义事件 …

Matlab中图的最短路径

前言&#xff1a; 图的基本概念&#xff1a; 若想简单绘制图可以利用此网站&#xff1a; 左上角Undirected/Directed是无向图/有向图 左边 0-index &#xff0c;1-index为0下标&#xff0c;1下标。 Node Count为节点个数 Graph Data&#xff1a;最初尾节点的名称&#xff…

2023华数杯数学建模A题思路 - 隔热材料的结构优化控制研究

# 1 赛题 A 题 隔热材料的结构优化控制研究 新型隔热材料 A 具有优良的隔热特性&#xff0c;在航天、军工、石化、建筑、交通等 高科技领域中有着广泛的应用。 目前&#xff0c;由单根隔热材料 A 纤维编织成的织物&#xff0c;其热导率可以直接测出&#xff1b;但是 单根隔热…

【C# 基础精讲】C# 开发环境搭建(Visual Studio等)

安装C#开发环境是开始学习和使用C#编程的第一步。目前&#xff0c;最常用的C#开发环境是Microsoft Visual Studio&#xff0c;它是一套强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;提供了丰富的工具和功能&#xff0c;使开发C#应用程序变得更加便捷。以下是安装…

Docker极速安装Jenkins

安装 Jenkins 是一个常见的任务&#xff0c;使用 Docker 进行安装可以简化该过程并确保环境一致性。以下是在 Docker 中安装 Jenkins 的详细步骤&#xff1a; 安装 Docker: 首先&#xff0c;请确保您已在目标机器上安装了 Docker。根据您的操作系统&#xff0c;可以在 Docker 官…

CCF-CSP 29次 第三题【202303-3 LDAP】(多个STL+递归)

计算机软件能力认证考试系统 #include <iostream> #include <cstring> #include <algorithm> #include <vector> #include <unordered_map> #include <string>using namespace std;typedef long long LL;const int N 2510, M 510;int n…