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.mzph.cn/news/23815.shtml

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

相关文章

海外应用商店优化实用指南之关键词

和SEO一样&#xff0c;关键词是ASO中的一个重要因素。就像应用程序标题一样&#xff0c;在Apple App Store和Google Play中处理应用程序关键字的方式也有所不同。 关键词研究。 对于Apple&#xff0c;我们的所有关键词只能获得100个字符&#xff0c;Google Play没有特定的关键…

STL空间配置器入门

STL简介   STL&#xff08;Standard Template Library&#xff0c;标准模板库&#xff09;&#xff0c;从根本上说&#xff0c;STL是一些“容器”的集合&#xff0c;这些“容器”有list,vector,set,map等&#xff0c;STL也是算法和其他一些组件的集合。 谈及组件&#xff0c…

Linux一阶段复习

Linux之父是林纳斯本纳第克特托瓦兹 Apache发布目录&#xff1a;/var/www/html nginx发布目录&#xff1a;/usr/share/nginx/html/ 配置dns的文件 &#xff1a; /etc/resolv.conf nginx的配置文件&#xff1a;/etc/nginx/ yum源的配置文件&#xff1a;/etc/yum.repos.d/ …

8.5day06 框架基础--反射+注解

文章目录 反射获取类的各种信息获取类的字节码文件 注解元注解 复习redis两道算法题 摆烂了&#xff0c;不想学啦&#xff01;&#xff01;&#xff01; 反射 反射主要用来做框架; 学习内容 获取类的各种信息 第一步 加载类&#xff0c;获取类的字节码文件 第二步 获取类的…

IDEA基础使用

IDEA基础使用 1、IDEA中显示用法和用户截图展示有调用显示无调用显示 对应方法 2、如何找出项目中所有不被调用方法截图展示对应方法 3、常用代码(Code)说明及快捷键:4、未完待续待日后更新。。。总结&#xff1a;欢迎指导&#xff0c;也祝码友们代码越来越棒&#xff0c;技术越…

AMEYA360:瑞萨电子MCU和MPU产品线将支持Microsoft Visual Studio Code

全球半导体解决方案供应商瑞萨电子宣布其客户现可以使用Microsoft Visual Studio Code&#xff08;VS Code&#xff09;开发瑞萨全系列微控制器&#xff08;MCU&#xff09;和微处理器&#xff08;MPU&#xff09;。瑞萨已为其所有嵌入式处理器开发了工具扩展&#xff0c;并将其…

个人隐私保护

文章目录 一、互联网生存指南&#xff1a;通过哪些方法来加强个人信息保护&#xff1f;二、个人信息保护与数字经济发展的关系应该如何平衡&#xff1f;三、互联网公司如何处理数据隐私&#xff1f;四、如何加强个人隐私教育和意识&#xff1f; 一、互联网生存指南&#xff1a;…

月报总结|Moonbeam 7月份大事一览

炎炎夏日&#xff0c;Moonbeam于越南举办了线下交流会&#xff0c;在EthCC 2023和以太坊社区成员共同讨论多链应用&#xff0c;在Polkadot Decoded中分享了Moonbeam的与众不同之处。 Bear Necessities Hackathon也于本月圆满结束&#xff0c;选出了每个赛道最杰出的项目&#…

CMake:检测python解释器和python库

CMake:检测python解释器和python库 导言检测python解释器CMakeLists.txt输出附录 检测python库项目结构CMakeLists.txt相关源码附录 导言 python是一种非常流行的语言。许多项目用python编写的工具&#xff0c;从而将主程序和库打包在一起&#xff0c;或者在配置或构建过程中使…

C 语言的递增运算符 ++ 和递减运算符 --

递增运算符 increment operator 放在while循环的判断条件中时&#xff0c;要使用前缀形式。 代码示例&#xff1a; #include<stdio.h>int main(void) {int shoe 0;while (shoe < 18.5){printf("%d\n", shoe);}return 0; }结果&#xff1a; 1 2 3 4 5 6…

Docker Enable live

ubuntu - Enabling live restore on docker isnt keeping the containers alive - Stack Overflow容器安全之启用实时恢复 - 简书 (jianshu.com)

MCU的类型和应用领域简介

MCU&#xff08;Microcontroller Unit&#xff09;根据存储器类型可分为无片内ROM型和带片内ROM型。无片内ROM型的芯片需要外接EPROM才能应用&#xff0c;而带片内ROM型则有不同的子类型&#xff0c;如片内EPROM型、MASK片内掩模ROM型和片内Flash型。 MCU还可以按照用途分为通…

NVM Command学习

ubuntu系统安装nvme-cli&#xff0c;可以在应用层发起命令。 sudo apt install nvme-cli$ sudo nvme --help nvme-1.9 usage: nvme <command> [<device>] [<args>]The <device> may be either an NVMe character device (ex: /dev/nvme0) or an nvme …

Cesium 实战教程 - 调整 3dtiles 倾斜摄影大小

Cesium 实战教程 - 调整 3dtiles 倾斜摄影大小 核心代码完整代码在线示例 之前由于误解遇到一个特殊的需求&#xff1a;想要把三维球上叠加倾斜摄影进行自由放大缩小&#xff0c;跟随地图的缩放进行缩放。 后来经过搜索、尝试&#xff0c;终于实现了需求。 但是&#xff0c;后…

应急响应-Linux

应急响应-Linux 1.关键目录 /etc/passwd 记录用户信息 /etc/shadow 保存用户密码&#xff08;hash&#xff09; /etc/crontab 定时任务文件 /etc/anacrontab 异步定时任务文件 /etc/rc.d/rc.local 开机启动项 /var/log/btmp …

用Abp实现找回密码和密码强制过期策略

用户找回密码&#xff0c;确切地说是重置密码&#xff0c;为了保证用户账号安全&#xff0c;原始密码将不再以明文的方式找回&#xff0c;而是通过短信或者邮件的方式发送一个随机的重置校验码&#xff08;带校验码的页面连接&#xff09;&#xff0c;用户点击该链接&#xff0…

React Hooks 中的 useEffect(副作用)

useEffect 是什么&#xff1f; useEffect 是一个 React Hook&#xff0c;它允许你将组件与外部系统同步 当我们在 React 中使用 useEffect 这个 Hook 时&#xff0c;实际上是在告诉 React 在特定情况下执行我们定义的副作用函数。这种副作用函数可以处理一些与组件渲染结果无关…

SpringBoot 日志文件

一、日志的作用 日志是程序的重要组成部分&#xff0c;想象一下&#xff0c;如果程序报错了&#xff0c;不让你打开控制台看日志&#xff0c;那么你能找到报错的原因吗 答案是否定的&#xff0c;写程序不是买彩票&#xff0c;不能完全靠猜&#xff0c;因此日志对于我们来说&a…

C语言数组笔试题(详解)

目录 插入知识&#xff1a; 一.指向函数指针数组的指针 二.回调函数 什么是回调函数&#xff1f; 三.数组笔试题 个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名乐于分享在学习道路上收获的大二在校生&#x1f43b;‍❄个人主页&#xff1a;GOTXX &#x1f4…

【Apollo学习笔记】—— 相机仿真

文章目录 前言相关代码整理 测试实践文件目录包管理BUILD文件以及cyberfile.xml文件源程序BUILD运行结果其他参考CameraOutput channels启动camera驱动启动camera video compression驱动 前言 本文是对Cyber RT的学习记录,文章可能存在不严谨、不完善、有缺漏的部分&#xff0…