canvas (2) 上色、渐变

最新推荐文章于 2024-07-07 22:18:15 发布
最新推荐文章于 2024-07-07 22:18:15 发布
阅读量361 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mx52jing/article/details/78815770
本文介绍如何使用HTML5 Canvas API进行绘图，包括设置填充颜色、边框颜色及创建线性和径向渐变效果。

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

上色

fillStyle

注: 要在绘画之前就设置好颜色，在绘画之后设置颜色是不管用的，不设置颜色值时默认值为黑色
绘制的图形的填充颜色
颜色值可以接受普通的（如: red），和十六进制(如: #fff)的，也支持rgb()和rgba()

栗子：这里看

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
<canvas id="fillStyle" width="150" height="150"></canvas>
  <script>
    let canvas = document.getElementById('fillStyle');
    if (canvas.getContext) {
      var ctx = canvas.getContext('2d');
    }
    // 第一个红色矩形
    ctx.fillStyle = 'red'
    ctx.fillRect(10,10,50,50);
    // 第二个蓝色矩形
    ctx.fillStyle = 'blue';
    ctx.fillRect(70,10,50,50);
    // 第三个灰色矩形(十六进制颜色值)
    ctx.fillStyle = '#ddd';
    ctx.fillRect(10,80,50,50);
    // 第四个深蓝色矩形(rgb颜色值)
    ctx.fillStyle = 'rgb(45,68,159)';
    ctx.fillRect(70,80,50,50)
  </script>
</body>
</html>

效果如下:

这里写图片描述

strokeStyle

简单来说就是边框颜色

栗子： 这里看

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
<canvas id="strokeStyle" width="150" height="150"></canvas>
  <script>
    let canvas = document.getElementById('strokeStyle');
    if (canvas.getContext) {
      var ctx = canvas.getContext('2d');
    }
    ctx.strokeStyle = 'red';
    ctx.beginPath();
    ctx.moveTo(10,10);
    ctx.lineTo(10,60);
    ctx.lineTo(35,35);
    ctx.closePath();
    ctx.stroke();

    ctx.strokeStyle = 'rgb(14,76,75)';
    ctx.beginPath();
    ctx.moveTo(55,35);
    ctx.lineTo(80,10);
    ctx.lineTo(80,60);
    ctx.closePath();
    ctx.stroke();
  </script>
</body>
</html>
</body>
</html>

效果图：
这里写图片描述

渐变

线性渐变

createLinearGradient(x1，y1, x2, y2)

属性描述
x1, y1渐变起点坐标
x2, y2渐变终点坐标

addColorStop(position, color)

position: 渐变的位置
color: 渐变颜色值

设置好渐变坐标后，调用addColorStop方法来设置渐变位置以及颜色

栗子： 这里看

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
<canvas id="linear-gradient" width="150" height="150"></canvas>
  <script>
    let canvas = document.getElementById('linear-gradient');
    if (canvas.getContext) {
      var ctx = canvas.getContext('2d');
    }
    let linear = ctx.createLinearGradient(30,30,150,150);
    linear.addColorStop(0.1, 'red');
    linear.addColorStop(0.3, 'blue');
    linear.addColorStop(0.8, 'rgb(67,12,178)');
    ctx.fillStyle = linear;
    ctx.fillRect(0,0,150,150);
  </script>
</body>
</html>
</body>
</html>

效果图:

这里写图片描述

径向渐变

径向渐变稍微有点复杂
createRadialGradient( x1 ,y1, r1 , x2, y2 , r2 )

参数描述
x1, y1, r1(x1, y1)是起始圆的圆心， r1是起始圆的半径
x2, y2, r2(x2, y2)是终止圆的圆心， r2是终止圆的半径
分好几种情况：

起始圆和终止圆同一圆心，起始圆在终止圆里面

代码和效果可在这里看

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
<canvas id="radial-gradient" width="300" height="300"></canvas>
  <script>
    let canvas = document.getElementById('radial-gradient');
    if (canvas.getContext) {
      var ctx = canvas.getContext('2d');
    }
let linear = ctx.createRadialGradient(150,150,30,150,150,100);
    linear.addColorStop(0.1, 'red');
    linear.addColorStop(0.3, 'blue');
    linear.addColorStop(0.8, 'yellow');
    ctx.fillStyle = linear;
    ctx.fillRect(0,0,300,300);
  </script>
</body>
</html>
</body>
</html>

效果图:

起始圆内是起始颜色
起始圆到终止圆之间部分是渐变部分，根据渐变位置慢慢渐变成终止色
终止圆外面为终止色

起始圆和终止圆同一圆心，终止圆在起始圆里面

代码和效果可在这里看

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
<canvas id="radial-gradient" width="300" height="300"></canvas>
  <script>
    let canvas = document.getElementById('radial-gradient');
    if (canvas.getContext) {
      var ctx = canvas.getContext('2d');
    }
let linear = ctx.createRadialGradient(150,150,100,150,150,30);
    linear.addColorStop(0.1, 'red');
    linear.addColorStop(0.3, 'blue');
    linear.addColorStop(0.8, 'yellow');
    ctx.fillStyle = linear;
    ctx.fillRect(0,0,300,300);
  </script>
</body>
</html>
</body>
</html>

效果图:
这里写图片描述

终止圆内是终止色
终止圆到起始圆之间开始渐变，根据渐变位置慢慢渐变成起始色
起始圆外面是起始色

起始圆和终止圆不同圆心，起始圆在终止圆里面

代码和效果可在这里看

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
<canvas id="radial-gradient" width="300" height="300"></canvas>
  <script>
    let canvas = document.getElementById('radial-gradient');
    if (canvas.getContext) {
      var ctx = canvas.getContext('2d');
    }
let linear = ctx.createRadialGradient(100,100,30,150,150,150);
    linear.addColorStop(0.1, 'red');
    linear.addColorStop(0.3, 'blue');
    linear.addColorStop(0.8, 'yellow');
    ctx.fillStyle = linear;
    ctx.fillRect(0,0,300,300);
  </script>
</body>
</html>
</body>
</html>

效果如下：

这里写图片描述

起始圆内是起始颜色
起始圆到终止圆之间部分是渐变部分，根据渐变位置慢慢渐变成终止色
终止圆外面为终止色

起始圆和终止圆不同圆心，终止圆在起始圆里面

代码和效果可在这里看

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
<canvas id="radial-gradient" width="300" height="300"></canvas>
  <script>
    let canvas = document.getElementById('radial-gradient');
    if (canvas.getContext) {
      var ctx = canvas.getContext('2d');
    }
let linear = ctx.createRadialGradient(150,150,150,100,100,50);
    linear.addColorStop(0.1, 'red');
    linear.addColorStop(0.3, 'blue');
    linear.addColorStop(0.8, 'yellow');
    ctx.fillStyle = linear;
    ctx.fillRect(0,0,300,300);
  </script>
</body>
</html>
</body>
</html>

效果如下：

这里写图片描述

终止圆内是终止色
终止圆到起始圆之间开始渐变，根据渐变位置慢慢渐变成起始色
起始圆外面是起始色

两个圆相离

来两张图感受下

这里写图片描述

这里写图片描述

起始圆外是起始色
从起始圆最靠外边开始渐变，渐变结束在终止圆外侧，终止圆开始为终止色
终止圆外是终止色

两圆相交

这里写图片描述

若两圆同圆心，同半径，则屏幕什么都没有，空白

canvas学习之给绘制出来的图形上色
zhangxiaochunxy的博客
03-14 1757
复习 截止目前，canvas的各种绘制方法我们都已经学习过了，可以绘制出线条，三角形，长方形，圆，圆弧，圆滑的曲线等，在此基础上，拥有足够的创造力，我们可以使用js在canvas画板上画出各种形象来。下面我们对已经学习过的内容进行总复习，然后开启新的篇章，去认识丰富多彩的canvas世界。 canvas是一个h5新添加的dom，在使用时要做好回退策略； canvas有一个getContext(‘...
canvas画任意角度的扇形，弧形，及扇形弧形填纯色渐变色
DayDreamWMM的博客
10-14 9028
前提： 接到一个需求，某个事项的完成率用环形表示，小于100%时，每隔25%为一种纯色填充，完成率100%的时候，整个环形为渐变色填充。开始是用的echarts,知道canvas是画图工具，但是之前没看过，也懒得学了。但是echarts对环形的填充只能是不同的纯色，没有找到渐变色填充的选项，产品经理不是很满意，今天就用canvas试了试。canvas，真好用哦。。。 完成代码 这是一份较粗略的代码...
HTML5 Canvas水彩画板涂色特效特效代码
03-20
HTML5 Canvas水彩画板涂色特效，TweenMax.js基于canvas绘制动态水彩画板涂色代码。
Canvas 3 着色
weixin_44317648的博客
05-08 489
上色 fillStyle:設定圖形填充色 fillStyle = color strokeStyle:設定圖形邊框顏色 strokeStyle = color color:可以是 css 顏色的字符串，也可以是漸變對象或者是圖案對象 canvas 默認顏色是黑色 每次改變顏色都需要重新設定，因爲之前的設定都會成爲默認值。 CSS 顏色標準包括 “orange” 顏...
带你快速玩转canvas（1）上手和染色
qq20004604的博客
12-05 857
DEMO地址使用canvas绘图绘图前提 先有一个canvas的html标签：<canvas></canvas> 标签通常请客下，只有height和width两个宽高属性， 例如：<canvas width='200' height='200'></canvas> 表示这个画布是宽高是200px，他所在的范围，就是画图的范围（超出部分无法绘图） 前获取的canvas标签所在的DOM，和正常获取
js使用canvas把灰度图转化为rgb图
qq_46258455的博客
03-13 819
【代码】js使用canvas把灰度图转化为rgb图。
html5canva绘制圆环填充效果,Canvas画图-一个比想象中更骚气的圆(渐变圆环)
weixin_39758494的博客
06-04 1553
之前介绍了Canvas画图基础，这篇介绍一下画一个带渐变效果的圆。一个渐变的圆环渐变色应用广泛，和圆环结合做进度条非常酷，今天我们就来画一个这样的圆环：Canvas渐变在Canvas画图基础中我们知道给canvas上色主要是ctx.fillStyle和ctx.strokeStyle方法，这里是圆环，所以主要讲strokeStyle方法，fillStyle方法也同样适用。看一下上面那个圆，像把一个线...
JS+canvas动态绘制饼图的方法示例
10-19
JS+canvas动态绘制饼图的方法涉及到了使用JavaScript操作HTML5的...需要注意的是，为了实现复杂的交互和动画效果，可能需要对canvas上下文中的其他绘图方法有一定的了解，如设置线宽、绘制文字、使用渐变和模式等。
Canvas：掌握颜色线条与图像文字设置
ztK63LrD的博客
07-07 2005
想象一下，用几行代码就能创造出如此逼真的图像和动画，仿佛将艺术与科技完美融合，前端开发的Canvas技术正是这个数字化时代中最具魔力的一环，它不仅仅是网页的一部分，更是一个无限创意的画布，一个让你的想象力自由驰骋的平台。
学习笔记——使用canvas给图形填色
layuecr的博客
09-19 4432
看到canvas的章节，想到可以用它来画个图。然后选了幅由简单线条组成的卡通火箭图，准备动手画。画的过程中遇到了些问题，这里整理一下。下面是找来的图：         没上色前，还感觉不出什么问题。就是使用lineTo画直线，quadraticCurveTo画曲线。附个没上色的图：         到上色了，就遇到问题了：一个颜色怎么覆盖到另外一个颜色上面去？
canvas系列教程之填充颜色
weixin_33943347的博客
03-17 7453
艺术离不开色彩，今天咱们来介绍一下填充颜色，体会一下色彩的魅力。 填充颜色主要分为两种： 基本颜色 渐变颜色（又分为线性渐变与径向渐变） 我们一个个来看。 填充基本颜色 Canvas fillStyle属性用来设置画布上形状的基本颜色和填充。fillStyle使用简单的颜色名称。这看起来非常简单，例如: context.fillStyle = "red"; 下面是出自 HTML4 规范...
canvas之添加颜色样式、绘制文本、使用图片
热门推荐
陈喵喵的博客
03-11 2万+
一、使用颜色和样式（一）色彩color给图形上色，有两个重要的属性可以用到：fillStyle 和 strokeStyle。fillStyle = color   设置图形的填充颜色。strokeStyle = color 设置图形轮廓的颜色。注意：一旦设置了fillStyle 或 strokeStyle的值，那么这个新值就会成为新绘制的图形的默认值。如果要给每个图形上不同的颜色，需要重新设置fi...
canvas样式和颜色
大白兔
10-25 1万+
color（颜色） fillStyle = color; // 设置图形的填充颜色 stokeStyle = color; // 设置图形的轮廓颜色 transparency（透明度） line styles（线型） gradient（渐变） patterns（图案样式） shadows（阴影） canvas填充规则 ...
说说在 Canvas 中如何填充形状基本颜色
读万卷书，行万里路
10-05 4742
Canvas 的 fillSytle 属性可设置形状的填充颜色。该属性可接受多种类型的颜色描述值。 （1）颜色字符串名称 context.fillStyle = "red"; context.fillRect(100, 100, 100, 100); 运行结果： 注意：HTML 4.0 只支持 16 种颜色名，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yello
Canvas（二）使用样式和颜色
sinat_37138973的博客
01-20 807
参考：使用样式和颜色 - Web API 接口参考 | MDN 使用样式和颜色 1、颜色填充 想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。 color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。我们迟些再回头探讨渐变和图案对象。默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）。 2、透明度Transparency 通过设置 globalAlpha 属性或者使用一个半透明颜色作为轮廓或填充的样式。 globalAl
yolov5二次封装，可以更方便得调用帧进行图像识别
最新发布
08-05
资源下载链接为： https://pan.quark.cn/s/16143ff6c6b0 yolov5二次封装，可以更方便得调用帧进行图像识别（最新、最全版本！打开链接下载即可用！）
Matlab中的机械臂仿真.zip
08-05
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
电缆机器人混合位置力控制器仿真.zip
08-05
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
中国地级市CO2排放数据（2000至2023年）
08-05
碳排放数据是衡量地方经济发展与环境可持续性的重要指标，通常包括二氧化碳排放量，来源涵盖能源消耗及工业、交通、建筑等领域。中国地域广阔、经济发展不均，各地碳排放水平差异较大。本次分享的数据为根据EDGAR资源提取的中国地级市CO2排放数据，时间范围为2000-2023年。数据名称：中国地级市CO2排放数据；数据年份：2000-2023年；数据范围：300个地级以上城市；样本数量：7200条；数据来源：EDGAR_2024_GHG；数据说明：根据EDGAR提取的城市碳排放数据。数据指标包括：年份、省份、城市、城市代码、所属地域、胡焕庸线、CO2排放总量。资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
HTML5 Canvas绘制彩色能量光圈动画教程
2. **应用渐变效果**：通过创建线性渐变或径向渐变来给圆形上色，使之呈现出彩色效果。 3. **绘制多个彩色圆环**：通过变换圆形路径的半径大小，绘制多层圆环，再分别应用不同的渐变效果，形成能量光圈的层次感。 #...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值