当前位置: 首页 > news >正文

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.lryc.cn/news/109857.html

相关文章:

  • Windows安装子系统Linux
  • C 语言的 pow() 函数
  • socket 基础
  • JMeter(二十五)、一些概念的理解---90%响应时间、事务、并发
  • 直播课 | 大橡科技研发总监丁端尘博士“类器官芯片技术在新药研发中的应用”
  • Python中的PDF文本提取:使用fitz和wxPython库(带进度条)
  • mysql 将字段值+1或自增
  • 组合总和——力扣39
  • PostgreSQL Patroni_exporter 监控 patroni高可用工具
  • C语言多级指针
  • IDEA项目实践——创建Java项目以及创建Maven项目案例、使用数据库连接池创建项目简介
  • ArraySetter
  • Python如何解决Amazon亚马逊“图文验证码”识别(6)
  • plsql连接oracle出现TTC错误
  • 4-golang爬虫下载的代码
  • Eureka增加账号密码认证登录
  • Practice5|58. 最后一个单词的长度、66. 加一
  • Practice4|14. 最长公共前缀、2. 两数相加
  • 第28天-Kubernetes架构,集群部署,Ingress,项目部署,Dashboard
  • 剑指OfferII-58.左旋转字符串
  • C语言每日一题:14《数据结构》复制带随机指针的链表
  • MySql008——检索数据:过滤数据(WHERE子句的使用)
  • vue2-v-show和v-if有什么区别,使用场景分别是什么?
  • 常用的排序算法简介:冒泡、选择、插入、归并、快速
  • Golang之路---04 项目管理——编码规范
  • hcip——期中小试
  • 华云安参编的《云原生安全配置基线规范》正式发布
  • 【计算机网络】NAT技术
  • Jenkins工具系列 —— 插件 实现用户权限分配与管理
  • 智能文件批量改名工具,自定义重命名,格式转换一步到位!