canvas 系列学习笔记三《样式和颜色》

最新推荐文章于 2024-10-29 11:34:01 发布
最新推荐文章于 2024-10-29 11:34:01 发布
阅读量352 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： canvas 文章标签： html 前端 javascript cannvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZY_FlyWay/article/details/126612159
本文详细介绍了在Canvas上使用JavaScript进行绘画的基本元素，包括设置颜色（红绿蓝及透明度）、线的样式（宽度、末端样式、连接点），以及线性渐变和圆形渐变的实现。通过实例展示了如何调整线条和填充的颜色，以及透明度的控制，帮助读者理解这些核心概念。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.颜色

1.1 概述

通过上下文可以设置strokeStyle (线条颜色) 和 fillStyle （填充颜色）。
设置完之后画线和填充就是设置的颜色。

1.2 代码示例

<!--
 * @Author: ZY
 * @Date: 2022-07-12 17:28:37
 * @LastEditors: ZY
 * @LastEditTime: 2022-07-14 15:16:48
 * @FilePath: /canvas-case/03-样式和颜色/01-颜色.html
 * @Description: 颜色
-->
<!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>颜色</title>
  </head>
  <body>
    <canvas id="canvas2d" width="200" height="200"></canvas>
  </body>
  <style>
    #canvas2d {
      border: 1px solid;
      display: block;
      margin: 0 auto;
    }
  </style>

  <script>
    let canvas2d = document.getElementById("canvas2d");
    if (canvas2d.getContext) {
      var ctx = canvas2d.getContext("2d");      
      ctx.strokeStyle = 'red'
      ctx.strokeRect(0,0,20,20)
      ctx.fillRect(20,0,20,20)
      ctx.fillStyle = 'rgba(255,0,0,1)'
      ctx.fillRect(40,0,20,20)
    }
  </script>
</html>

1.3 运行显示

在这里插入图片描述

2.透明度

2.1 概述

透明度主要通过两种方式改变：

  1. 通过添加strokeStyle 和 fillStyle 设置 rgba 颜色改变透明度
  2. 可以更改context 的 globalAlpha 属性更改

2.2 代码示例

<!--
 * @Author: ZY
 * @Date: 2022-07-13 09:04:48
 * @LastEditors: ZY
 * @LastEditTime: 2022-07-13 09:53:09
 * @FilePath: /canvas-case/03-样式和颜色/02-透明度.html
 * @Description: 透明度
-->
<!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>透明度</title>
  </head>
  <body>
    <canvas id="canvas2d" width="500" height="500"></canvas>

  </body>
  <style>
    #canvas2d {
      border: 1px solid;
      display: block;
      margin: 0 auto;
    }
  </style>

  <script>
    let canvas2d = document.getElementById("canvas2d");
    if (canvas2d.getContext) {
      var ctx = canvas2d.getContext("2d");      
      for (let index = 0; index <10; index++) {
        ctx.strokeStyle = 'blue'
        ctx.globalAlpha = 0.03 * index
        ctx.arc(100, 100, 10 * index, 0, 2 * Math.PI);
        ctx.stroke()
      }
      ctx.moveTo(300, 300)
      ctx.beginPath()

      for (let i = 0; i <10; i++) {
        ctx.strokeStyle = 'rgba(0,0,255,0.03 * i)'
        ctx.arc(300, 300, 10 * i, 0, 2 * Math.PI);
        ctx.stroke()
      }
    }
  </script>
</html>

2.3 运行显示

在这里插入图片描述

3.线的样式

3.1 概述

线的样式主要有四个配置属性注意点：

  1. 线的宽度 lineWidth
  2. 设置线条末端样式 lineCap, ( butt 线段末端以方形结束；round：线段末端以圆形结束；square
    线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域）
  3. 设定线条与线条间接合处的样式 lineJoin (round: 圆形连接点；bevel：在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。miter：通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果)
  4. 虚线

3.2 代码示例

<!--
 * @Author: ZY
 * @Date: 2022-07-13 09:55:24
 * @LastEditors: ZY
 * @LastEditTime: 2022-07-14 17:27:58
 * @FilePath: /canvas-case/03-样式和颜色/03-线的样式.html
 * @Description: 线的样式
-->
<!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>线的样式</title>
  </head>
  <body>
    <canvas id="canvas2d" width="500" height="500"></canvas>
  </body>
  <style>
    #canvas2d {
      border: 1px solid;
      display: block;
      margin: 0 auto;
    }
  </style>

  <script>
    let canvas2d = document.getElementById("canvas2d");
    if (canvas2d.getContext) {
      var ctx = canvas2d.getContext("2d");

      // lineWidth
      for (var i = 0; i < 10; i++) {
        ctx.lineWidth = 1 + i;
        ctx.beginPath();
        ctx.moveTo(5 + i * 14, 5);
        ctx.lineTo(5 + i * 14, 140);
        ctx.stroke();
      }

      // lineCap :  butt，round 和 square
      // 创建路径
      ctx.lineWidth = 1;
      ctx.strokeStyle = "#09f";
      ctx.beginPath();
      ctx.moveTo(150, 10);
      ctx.lineTo(290, 10);
      ctx.moveTo(150, 140);
      ctx.lineTo(290, 140);
      ctx.stroke();

      // 画线条
      var lineCap = ["butt", "round", "square"];
      ctx.strokeStyle = "black";
      for (var i = 0; i < lineCap.length; i++) {
        ctx.lineWidth = 15;
        ctx.lineCap = lineCap[i];
        ctx.beginPath();
        ctx.moveTo(170 + i * 50, 10);
        ctx.lineTo(170 + i * 50, 140);
        ctx.stroke();
      }

      // lineJoin: round, bevel 和 miter。
      var lineJoin = ["round", "bevel", "miter"];
      ctx.lineWidth = 10;
      ctx.translate(310, 10);
      for (var i = 0; i < lineJoin.length; i++) {
        ctx.lineJoin = lineJoin[i];
        ctx.beginPath();
        ctx.moveTo(-5, 5 + i * 40);
        ctx.lineTo(35, 45 + i * 40);
        ctx.lineTo(75, 5 + i * 40);
        ctx.lineTo(115, 45 + i * 40);
        ctx.lineTo(155, 5 + i * 40);
        ctx.stroke();
      }

      // 虚线
      var offset = 0;
      ctx.translate(-300, 140);
      ctx.lineWidth = 2

      function draw() {
        ctx.clearRect(0, 0, canvas2d.width, canvas2d.height);
        ctx.setLineDash([8, 10]);
        ctx.lineDashOffset = -offset;
        ctx.strokeRect(10, 10, 100, 100);
      }

      function march() {
        offset++;
        if (offset > 16) {
          offset = 0;
        }
        draw();
        setTimeout(march, 20);
      }

      march();
    }
  </script>
</html>

3.3 运行显示

请添加图片描述

4.线性渐变

4.1 概述

就好像一般的绘图软件一样，我们可以用线性或者径向的渐变来填充或描边。我们用下面的方法新建一个 canvasGradient 对象，并且赋给图形的 fillStyle 或 strokeStyle 属性。

createLinearGradient(x1, y1, x2, y2)
createLinearGradient 方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。

gradient.addColorStop(position, color)
addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF，rgba(0,0,0,1)，等等）。

主要思路设置变色范围 和 颜色范围值

4.2 代码示例

<!--
 * @Author: ZY
 * @Date: 2022-07-12 17:28:37
 * @LastEditors: ZY
 * @LastEditTime: 2022-07-18 16:34:59
 * @FilePath: /canvas-case/03-样式和颜色/04-渐变.html
 * @Description: 颜色
-->
<!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>颜色</title>
  </head>
  <body>
    <canvas id="canvas2d" width="200" height="200"></canvas>
  </body>
  <style>
    #canvas2d {
      border: 1px solid;
      display: block;
      margin: 0 auto;
    }
  </style>

  <script>
    let canvas2d = document.getElementById("canvas2d");
    if (canvas2d.getContext) {
      var ctx = canvas2d.getContext("2d");
      var lingrad = ctx.createLinearGradient(0, 0, 100, 0);
      lingrad.addColorStop(0, "red");
      lingrad.addColorStop(1, "green");

      ctx.strokeStyle = lingrad;
      ctx.fillStyle = lingrad;

      ctx.lineWidth = 10;
      ctx.moveTo(0, 10);
      ctx.lineTo(150, 10);
      ctx.stroke();

      
      ctx.fillRect(25, 25, 50, 50);
      ctx.strokeRect(25, 125, 50, 50);


    }
  </script>
</html>

4.3 运行显示

在这里插入图片描述

5.圆形渐变

5.1 概述

其他和线性渐变一样，只是createLinearGradient 换成圆形 createRadialGradient

5.2 代码示例

<!--
 * @Author: ZY
 * @Date: 2022-07-12 17:28:37
 * @LastEditors: ZY
 * @LastEditTime: 2022-07-19 17:00:15
 * @FilePath: /canvas-case/03-样式和颜色/05-圆形渐变.html
 * @Description: 05-圆形渐变
-->
<!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>05-圆形渐变</title>
  </head>
  <body>
    <canvas id="canvas2d" width="200" height="200"></canvas>
  </body>
  <style>
    #canvas2d {
      border: 1px solid;
      display: block;
      margin: 0 auto;
    }
  </style>

  <script>
    let canvas2d = document.getElementById("canvas2d");
    if (canvas2d.getContext) {
      var ctx = canvas2d.getContext("2d");
      // 创建渐变
      var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
      radgrad.addColorStop(0, "#A7D30C");
      radgrad.addColorStop(0.9, "#019F62");
      radgrad.addColorStop(1, "rgba(1,159,98,0)");

      var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
      radgrad2.addColorStop(0, "#FF5F98");
      radgrad2.addColorStop(0.75, "#FF0188");
      radgrad2.addColorStop(1, "rgba(255,1,136,0)");

      var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
      radgrad3.addColorStop(0, "#00C9FF");
      radgrad3.addColorStop(0.8, "#00B5E2");
      radgrad3.addColorStop(1, "rgba(0,201,255,0)");

      var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
      radgrad4.addColorStop(0, "#F4F201");
      radgrad4.addColorStop(0.8, "#E4C700");
      radgrad4.addColorStop(1, "rgba(228,199,0,0)");

      // 画图形
      ctx.fillStyle = radgrad4;
      ctx.fillRect(0, 0, 150, 150);
      ctx.fillStyle = radgrad3;
      ctx.fillRect(0, 0, 150, 150);
      ctx.fillStyle = radgrad2;
      ctx.fillRect(0, 0, 150, 150);
      ctx.fillStyle = radgrad;
      ctx.fillRect(0, 0, 150, 150);
    }
  </script>
</html>

5.3 运行显示

在这里插入图片描述

js获得canvas中指定像素点的颜色
12-28
插件描述：插件可以获得canvas中指定位置像素点的颜色，支持返回多种格式的颜色. 参考示例：http://www.jq22.com/jquery-info5319
JavaScript - canvas - 颜色选择器
qq_29761395的博客
09-19 444
文章目录效果示例参考 效果 示例 项目结构： 源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>颜色选择器</title> <style type="text/css"> div { width: 200px;
canvas绘制一个圆分成六等分颜色随机
阳神
02-15 1589
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; ...
JavaScript通过canvas绘制可以自定义颜色、文字效果的动态环形进度条
qq_40386177的博客
05-19 1493
早些时候写过的一个大屏项目，环形进度条是使用css来实现的，但为避免一下样式问题，使用现在尝试对以前的功能进行修改，使用canvas进行绘制，并能自定义颜色和文字样式。height100px
Canvas：掌握颜色线条与图像文字设置
ztK63LrD的博客
07-07 1963
想象一下，用几行代码就能创造出如此逼真的图像和动画，仿佛将艺术与科技完美融合，前端开发的Canvas技术正是这个数字化时代中最具魔力的一环，它不仅仅是网页的一部分，更是一个无限创意的画布，一个让你的想象力自由驰骋的平台。
Canvas入门学习笔记
最新发布
11-30
Canvas是一个HTML5标准中提供的标签，它定义在浏览器上的画布，可以通过其强大的绘图接口实现...以上就是Canvas入门学习的重点知识，通过以上知识点的学习，我们可以利用Canvas在网页上绘制各种图形、动画和小游戏。
canvas学习笔记之绘制简单路径
09-22
3. `stroke()`：最后调用`stroke()`方法，根据当前设置的线条样式（颜色、宽度等），绘制出从上一个`moveTo`或`lineTo`的点到当前点的线段。如果想要清除之前绘制的路径，可以使用`beginPath()`方法开始一个新的路径...
canvas学习笔记（三）----使用样式和颜色
zhangyr的博客
11-08 481
//颜色 fillStyle = color;//设置图形的填充颜色 ctx.fillStyle strokeStyle = color;//设置图形轮廓的颜色 ctx.strokeStyle globalAlpha = transparencyValue;//设置填充颜色或轮廓颜色的透明度 ctx.globalAlpha //线条样式 lineWidth = value;//...
HTML5 Canvas学习笔记(5)游戏得分动画
08-06
这篇“HTML5 Canvas学习笔记(5)游戏得分动画”着重讲解了如何利用Canvas技术来实现游戏中的得分动画效果。通过学习这篇笔记，我们可以深入了解Canvas的基本用法以及如何将它应用于游戏开发。 首先，Canvas是HTML5的...
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
08-06
在“HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体”这篇博文中，作者深入探讨了如何利用Canvas技术来实现菜单项的高亮显示以及如何处理像素字体，这两点在构建具有视觉吸引力和用户友好性的Web应用时非常重要。...
Canvas 教程（一）
路漫漫其修远兮，吾将上下而求索
10-29 3112
前面演示的方式获取到的仅仅是html元素，现在这种方式 js 能够识别到这是canvas元素。❗ 有博主说：canvas和别的元素不太一样，需要使用属性的方式设置宽和高，不然会有问题。这个情况我暂时还没发现有什么问题，两种方式试了一下都能展示，有问题后面再说。很明显，通过样式修改的宽高尺寸已经严重扭曲。接下来，我们画一个方形看看，直接给代码进行演示。2. 拿到渐变对象，设置渐变的起止颜色，1. 通过画笔对象，创建线性渐变对象。方法把画笔移动到直线的起点。方法把画笔移动到直线的终点。请画出如下所示的折线图？
canvas设置颜色及线条样式
热门推荐
星星有所不知
03-21 2万+
canvas设置颜色及线条样式1. canvas设置颜色2. canvas设置线条样式 1. canvas设置颜色 fillStyle = color; //设置图形的填充颜色 strokeStyle = color; //设置图形轮廓的颜色 color可以是表示css颜色值的字符串，渐变对象或者图案对象，color默认为黑色 globalAlpha = 透明度（0-1）//设置透明度，有效范围...
html5 canvas 修改像素颜色,javascript – Canvas – 使用HTML5 / CSS / JS更改图像的颜色？...
weixin_31364787的博客
06-04 928
此功能需要加载图像,并且必须来自同一域(由于跨域策略)function tintImage(imgElement,tintColor) {// create hidden canvas (using image dimensions)var canvas = document.createElement("canvas");canvas.width = imgElement.offsetWidth...
Canvas使用样式和颜色
ryan的博客
02-26 2017
1、色彩 默认色彩是黑色（#000000） fillStyle = color 设置图形的填充颜色。 strokeStyle = color 设置图形轮廓的颜色。 1.色板 function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i=0;i&...
【Canvas与色彩】canvas可用颜色代号环状表
一念非凡(46岁待业程序员)
08-20 811
将Canvas可用颜色代号以环状表的形式列出。
canvas样式与颜色，字体，图片，状态，形变
yunbabac的博客
02-22 2253
canvas学习
canvas详解02-样式和颜色控制
大雾起了清晨
06-23 4070
在绘制图形的章节里，我只用到默认的线条和填充样式。而在这一章里，我们将会探讨 canvas 全部的可选项，来绘制出更加吸引人的内容。
【web可视化】canvas画图学习详细教程笔记&完整代码
m0_67986791的博客
02-14 1838
ctx.lineJoin = 'bevel'//设置线段连接处为默认/圆形/平直形式(miter/round/bevel)ctx.lineCap = 'round' //设置线帽为圆形round/butt默认/aquare方形。stroke()方法是进行绘制。把strokeRect()方法拆成了stroke()和rect()方法，好处就是使用。arc(圆心坐标，半径，初始角度，结束角度，顺时针false/逆时针true)用 ctx.closePath()//把线段的终点和起点连接起来这样更衔接了。
html5 canvas绘图之fillStyle,strokeStyle的区别
cuiyaoqiang的博客
10-21 6286
html5 canvas绘图之fillStyle,strokeStyle context.fillStyle(“”)： 表示 填充颜色 context.strokeStyle(“”)：表示边框颜色。 效果如下图：
Canvas API学习笔记：基础绘制与实例解析
"canvas学习之API整理笔记（一）" 在Web开发中，Canvas是一个非常重要的技术，它允许开发者在网页上动态绘制图形。本文主要关注的是Canvas的API，特别是对于初学者如何掌握并运用这些API进行图形绘制。Canvas本身是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

星宇大前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值