Canvas学习笔记二 - 样式和颜色

最新推荐文章于 2024-05-17 16:33:04 发布
最新推荐文章于 2024-05-17 16:33:04 发布
阅读量439 收藏 2
点赞数 1
分类专栏： # Canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44808483/article/details/114979893
版权

一、颜色 Colors

方法说明
fillStyle = color设置图形的填充颜色。
strokeStyle = color设置图形轮廓的颜色。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas学习笔记</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body onload="draw()">
    <canvas id="canvas" width="500" height="500"></canvas>
  </body>
  <script>
	// function draw () {}
  </script>
</html>

// fillStyle()
function draw() {
  var canvas = document.getElementById('canvas');
  var mappings = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']; // 关于颜色值之间的映射，方便提取值。

  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    for (let i = 0; i < mappings.length; i++) {
      for (let j = 0; j < mappings.length; j++) {
		
        ctx.fillStyle = `#${mappings[i]}0${mappings[j]}`; // 颜色使用的是16进制的三位数字表示如：#000，可以适当调整参数改变效果。
        ctx.fillRect(i * 30, j * 30, 30, 30);
      }
    }
  }
}

// strokeStyle()
function draw() {
  var canvas = document.getElementById('canvas');
  var mappings = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];

  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    for (let i = 0; i < mappings.length; i++) {
      for (let j = 0; j < mappings.length; j++) {
        
        ctx.beginPath();
        ctx.strokeStyle = `#${mappings[j]}0${mappings[i]}`;

        ctx.arc(i * 30 + 15, j * 30 + 15, 15, 0,Math.PI * 2);
        ctx.stroke();
      }
    }
  }
}

二、透明度 Transparency

除了可以绘制实色图形，我们还可以用 canvas 来绘制半透明的图形。通过设置 globalAlpha 属性或者使用一个半透明颜色作为轮廓或填充的样式。

方法描述
globalAlpha = transparencyValue这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。

当然，可以也可以使用 rgba() 色值实现透明度。

function draw() {
  var canvas = document.getElementById('canvas');

  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = '#dd5044';
    ctx.fillRect(0, 0, 250, 250);
    ctx.fillStyle = '#1b9e5f';
    ctx.fillRect(250, 0, 250, 250);
    ctx.fillStyle = '#4a8af4';
    ctx.fillRect(0, 250, 250, 250);
    ctx.fillStyle = '#ffcd41';
    ctx.fillRect(250, 250, 250, 250);
    
    // 透明方式 一、
    ctx.fillStyle = '#fff';
    ctx.globalAlpha = 0.05;

    // 透明方式 二、
    // ctx.fillStyle = '#ffffff0f';

    for (let i = 0; i < 15; i++) {
      ctx.beginPath();
      ctx.arc(250, 250, 20 * i, 0, Math.PI * 2);
      ctx.fill();
    }
  }
}

在这里插入图片描述

// 方式二 HEX 色值扩展
function draw() {
  var canvas = document.getElementById('canvas');
  var mappings = [4, 5, 6, 7, 8, 9, 'a', 'b', 'c'];

  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = '#dd5044';
    ctx.fillRect(0, 0, 500, 125);
    ctx.fillStyle = '#1b9e5f';
    ctx.fillRect(0, 125, 500, 125);
    ctx.fillStyle = '#4a8af4';
    ctx.fillRect(0, 250, 500, 125);
    ctx.fillStyle = '#ffcd41';
    ctx.fillRect(0, 375, 500, 125);

    // 控制位置
    for (let i = 0; i < 4; i++) {
      // 控制透明度
      for (let j = 0; j < mappings.length; j++) {
        ctx.fillStyle = `#fff${mappings[j]}`;
        // x , y 所加的值为起始位置的比例，w , h 已经固定
        ctx.fillRect(j * 46 + 46, i * 125 + 15, 46, 95);
      }
    }
  }
}

在这里插入图片描述

三、线形 Line styles

方法、属性描述
lineWidth = value设置线条宽度。
lineCap = type设置线条末端样式。
lineJoin = type设定线条与线条间接合处的样式。
miterLimit = value限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。
lineDashOffset = value设置虚线样式的起始偏移量。
getLineDash()返回一个包含当前虚线样式，长度为非负偶数的数组。
setLineDash(segments)设置当前虚线样式。

1. lineWidth 属性

这个属性设置当前绘线的粗细。属性值必须为正数。默认值是1.0。
线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。因为画布的坐标并不和像素直接对应，当需要获得精确的水平或垂直线的时候要特别注意。

function draw() {
  var canvas = document.getElementById('canvas');

  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    for (let i = 0; i < 10; i++) {
      ctx.lineWidth = i;
      ctx.beginPath();
      ctx.moveTo(i * 42 + 50, 50);
      ctx.lineTo(i * 42 + 50, 450);
      ctx.stroke();
    }
  }
}

2. lineCap 属性

属性 lineCap 的值决定了线段端点显示的样子。它可以为下面的三种的其中之一：butt，round 和 square。默认是 butt。
在这里插入图片描述

function draw() {
  var canvas = document.getElementById('canvas');

  if (canvas.getContext) {
    var lineCap = ['butt', 'round', 'square'];
    var ctx = canvas.getContext('2d');

    for (let i = 0; i < lineCap.length; i++) {
      ctx.beginPath();
      ctx.lineWidth = 10;
      ctx.lineCap = lineCap[i];
      ctx.moveTo(i * 50 + 50, 50);
      ctx.lineTo(i * 50 + 50, 150);
      ctx.stroke();
    }

    // 辅助线
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'skyblue';
    ctx.moveTo(40, 50);
    ctx.lineTo(160, 50);
    ctx.moveTo(40, 150);
    ctx.lineTo(160, 150);
    ctx.stroke();
  }
}

3. lineJoin 属性

lineJoin 的属性值决定了图形中两线段连接处所显示的样子。它可以是这三种之一：round, bevel 和 miter。默认是 miter。

在这里插入图片描述

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var lineJoin = ['round', 'bevel', 'miter'];
  ctx.lineWidth = 10;
  for (let 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();
  }
}

4. miterLimit 属性

就如上一个例子所见的应用 miter 的效果，线段的外侧边缘会被延伸交汇于一点上。线段之间夹角比较大时，交点不会太远，但随着夹角变小，交点距离会呈指数级增大。

miterLimit 属性就是用来设定外延交点与连接点的最大距离，如果交点距离大于此值，连接效果会变成了 bevel。注意，最大斜接长度（即交点距离）是当前坐标系测量线宽与此miterLimit属性值（HTML 默认为10.0）的乘积，所以miterLimit可以单独设置，不受显示比例改变或任何仿射变换的影响：它只影响线条边缘的有效绘制形状。

5、虚线

方法、属性说明
setLineDash()接受一个数组，来指定线段与间隙的交替。
lineDashOffset设置起始偏移量。
// 实现蚂蚁线，并让它动起来。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var offset = 0;

// 绘制蚂蚁线
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.setLineDash([5, 3]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(20, 20, 460, 460);
}

// 通过改变offset值，实现动画
function march() {
  offset++;
  if (offset > 10) {
    offset = 0;
  }
  draw();
  setTimeout(march, 10);
}
march();

四、渐变 Gradients

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

方法说明
createLinearGradient(x1, y1, x2, y2)createLinearGradient 方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
createRadialGradient(x1, y1, r1, x2, y2, r2)createRadialGradient 方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
gradient.addColorStop(position, color)addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）。

1. 线性渐变

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  // 定义一个颜色容器，设置起始终点的位置。
  var lineargradient = ctx.createLinearGradient(250, 0, 250, 500);
  lineargradient.addColorStop(0, 'white'); // 按照0-1的区间，设置颜色的比例
  lineargradient.addColorStop(1, 'black');
  
  // 将设置好的颜色赋值，绘画出的矩形
  ctx.fillStyle = lineargradient;
  ctx.fillRect(10, 10, 480, 480)
}

2. 径向渐变

在这里插入图片描述

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  var radgrad = ctx.createRadialGradient(180, 300, 20, 180, 380, 150);
  radgrad.addColorStop(0,'#a7d30c');
  radgrad.addColorStop(.9,'#05a05e');
  radgrad.addColorStop(1,'#05a05e00');
  var radgrad1 = ctx.createRadialGradient(310,350,10, 350, 400, 100);
  radgrad1.addColorStop(0, '#01caff');
  radgrad1.addColorStop(.9, '#00b6e3');
  radgrad1.addColorStop(1, '#00b6e300');

  ctx.fillStyle = radgrad;
  ctx.fillRect(0, 0, 500, 500);
  ctx.fillStyle = radgrad1;
  ctx.fillRect(0, 0, 500, 500);
}

五、图案样式 Patterns

方法描述
createPattern(image, type)该方法接受两个参数。Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。

图案的应用跟渐变很类似的，创建出一个 pattern 之后，赋给 fillStyle 或 strokeStyle 属性即可。

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  var img = new Image();
  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
  // img加载完成执行
  img.onload = function () {
    // 定义需要填充的图片
    var ptrn = ctx.createPattern(img, 'repeat');

    ctx.fillStyle = ptrn;
    ctx.fillRect(10, 10, 480, 480);
  };
}

六、阴影 Shadows

属性描述
shadowOffsetX = floatshadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
shadowOffsetY = floatshadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
shadowBlur = floatshadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
shadowColor = colorshadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.shadowOffsetX = 5;
  ctx.shadowOffsetY = 5;
  ctx.shadowBlur = 2;
  ctx.shadowColor = '#0008';

  // 设置字体大小、字体类型
  ctx.font = '80px Times New Roman';
  ctx.fillStyle = 'skyblue';
  ctx.fillText('Hello Canvas!', 20, 80); // 显示文本内容：文本内容，起始x轴，起始y轴
}

七、Canvas 填充规则

当我们用到 fill（或者 clip和isPointinPath ）你可以选择一个填充规则，该填充规则根据某处在路径的外面或者里面来决定该处是否被填充，这对于自己与自己路径相交或者路径被嵌套的时候是有用的。

两个可能的值：
“nonzero”: non-zero winding rule, 默认值.
“evenodd”: even-odd winding rule, 交替填充在这里插入图片描述

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.beginPath();
  ctx.arc(250, 250, 50, 0, Math.PI * 2, true);
  ctx.arc(250, 250, 150, 0, Math.PI * 2, true);
  ctx.arc(250, 250, 10, 0, Math.PI * 2, true);
  ctx.fill('evenodd');
}
俊小赞
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Canvas（二）使用样式和颜色
sinat_37138973的博客
01-20 721
参考：使用样式和颜色 - Web API 接口参考 | MDN 使用样式和颜色 1、颜色填充 想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。 color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。我们迟些再回头探讨渐变和图案对象。默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）。 2、透明度Transparency 通过设置 globalAlpha 属性或者使用一个半透明颜色作为轮廓或填充的样式。 globalAl
HTML5 canvas lineCap 和 lineJoin 属性
ssisse的博客
08-16 5010
HTML 5 canvas lineCap 属性 定义和用法 lineCap 属性设置或返回线条末端线帽的样式。 注释："round" 和 "square" 会使线条略微变长。 默认值： butt JavaScript 语法： context.lineCap="butt|round|square"; 属
canvas学习笔记-透明度
最新发布
m0_51181022的博客
05-17 933
在上面画一系列半径递增的半透明圆。圆叠加得越多，原先所画的圆的透明度会越低。通过增加循环次数，画更多的圆，从中心到边缘部分，背景图会呈现逐渐消失的效果。方法类似，就多了一个用于设置色彩透明度的参数。它的有效范围是从 0.0（完全透明）到 1.0（完全不透明）。里所有图形的透明度，有效的值范围是0.0（完全透明）到1.0（完全不透明），默认值是1.0。第二个例子和上面的那个类似，不过不是画圆，而是画矩形。可以分别设置轮廓和填充样式，因而具有更好的可操作性和使用灵活性。
canvas(四)描边样式与投影
陈小陈的博客
01-10 1230
文章目录影响描边样式的元素lineWidth 描边宽lineCap 描边端点lineJoin 描边拐角miterLimit 拐角最大厚度setLineDash(segments) 虚线lineDashOffset 虚线偏移 影响描边样式的元素 strokeStyle：描边的颜色 lineWidth：描边宽 lineCap：描边端点样式 lineJoin：描边拐角类型 miterLimit：拐角最大厚度（只适用于lineJoin=‘miter’ 的情况） setLineDash(segments)：将描边设
【canvas】canvas基础使用（四）：线型的设置
qq_2511276124的博客
04-10 992
学习如何使用canvas来设置线形。
HTML5 Canvas 绘图方法整理 【十七、Canvas透明度 / 图形叠加、层次、冲突】
freedomVenly的博客
02-23 7022
Canvas 设置透明度 ： 语法： ctx.globalAlpha= 属性值; 属性值是 0 - 1之间的数字。 同CSS一样的透明度属性值 不过fillStyle 或 strokeStyle 本身也可以自己设定透明值， 所以用到globalAlpha 并不多， 不过还是了解下，谁知道哪天会有什么反人类的要求会用到呢 (。・・)ノ &lt;...
canvas学习笔记之绘制简单路径
09-22
3. `stroke()`：最后调用`stroke()`方法，根据当前设置的线条样式（颜色、宽度等），绘制出从上一个`moveTo`或`lineTo`的点到当前点的线段。如果想要清除之前绘制的路径，可以使用`beginPath()`方法开始一个新的路径...
canvas学习之API整理笔记（一）
08-31
在本篇“canvas学习之API整理笔记（一）”中，我们主要关注的是Canvas的基本API，包括如何获取Canvas元素、创建画布以及如何在Canvas上绘制基本图形。 首先，要在HTML中使用Canvas，需要在页面中添加一个`<canvas>`...
HTML5 Canvas学习笔记(5)游戏得分动画
08-06
这篇“HTML5 Canvas学习笔记(5)游戏得分动画”着重讲解了如何利用Canvas技术来实现游戏中的得分动画效果。通过学习这篇笔记，我们可以深入了解Canvas的基本用法以及如何将它应用于游戏开发。 首先，Canvas是HTML5的...
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
08-06
在“HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体”这篇博文中，作者深入探讨了如何利用Canvas技术来实现菜单项的高亮显示以及如何处理像素字体，这两点在构建具有视觉吸引力和用户友好性的Web应用时非常重要。...
canvas学习
11-22
在这个“canvas学习”的压缩包中，你将找到关于canvas的基本语法和学习笔记，这对于想要掌握这个技术的前端开发者来说是非常宝贵的资源。 1. **Canvas元素** - `canvas`标签是HTML5中的一个新元素，用于在网页上...
canvas样式和颜色
热门推荐
大白兔
10-25 1万+
color（颜色） fillStyle = color; // 设置图形的填充颜色 stokeStyle = color; // 设置图形的轮廓颜色 transparency（透明度） line styles（线型） gradient（渐变） patterns（图案样式） shadows（阴影） canvas填充规则 ...
笔记十一（canvas颜色应用基础）
草木黄尘
11-30 521
1、色彩合成 假设想通过红绿蓝三原色的三个数值合成一个完整有效的颜色值，可以借助以下公式：var color = 0xFF << 16 | 0X55 << 8 | 0X33; //采用十六进制 var color = 255 <<16 | 88 << 8 | 10; //采用十进制亦可2、提取三原色 假设想从一种颜色中提取每个独立的三原色的值：red = color >> 16 & 0xFF;
html2canvas图片全黑,html2canvas – 如何使透明颜色白色而不是画布中的黑色？
weixin_42298424的博客
06-05 1914
我修改了临时：_html2canvas.Util.isTransparent from_html2canvas.Util.isTransparent = function(backgroundColor) {return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");};至_html2ca...
canvas基本操作
丰空岛主(Vega Prime,Android,LabWindows,ThreeJS,Python,OpenCV）
12-16 1799
创建一个画布（Canvas） 一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制. 注意:默认情况下 <canvas> 元素没有边框和内容。 <canvas>简单实例如下: <canvas id="myCanvas" width="200" height="100"></canvas> 注意:标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小. 提示:你可以在HTML..
html用变量存储颜色信息,我如何使用间隔循环修改HTML Canvas颜色？
weixin_35586996的博客
06-18 351
hue变量和hsl样式中的百分比控制颜色。要从RGB颜色150,150,200开始，将色调设置为240，将饱和度(hsl中的第二个参数)设置为25%，将亮度(第三个参数)设置为78%。要以RGB颜色190,160,200结束，您需要循环，直到色相值达到285为止。您还需要一个饱和度值的变量，因为它应该以20%结束。HSL colors或者，使用RGB颜色代替HSL颜色...编辑：点击如果你想停止这...
canvas笔记--色彩篇
qq_44758643的博客
09-23 154
色彩 fillStyle和strokeStyle fillStyle=color 设置填充形状时使用的样式 strokeStyle=color 设置形状轮廓时填充的样式 color与css中的color一样 **注意：**这两个颜色设置一次后其后面的颜色默认是设置的颜色除非重新更改 ctx.fillStyle = 'orange'; ctx.fillStyle = '#FFA500'; ctx.fillStyle = 'rgb(255, 165, 0)'; ctx.fillStyle = 'rgba(255
html中对于fillstyle示例
行善之人必有余庆
05-26 609
fillstyle function draw(id) { var canvas = document.getElementById(id); var context = canvas.getContext('2d'); for(var i=0;i<6;i++) { for(var j=0;j<6;j++) { context.fillStyle='rg
Canvas基础知识
lhrdlp的学习笔记
04-02 1287
一、概述 Canvas是HTML5中非常重要的一个更新亮点，画布，替代Flash的！制作动画、制作游戏。渲染效率非常的高，浏览器不需要安装任何的插件就可以渲染这个动画。而Flash需要安装Flash Player这个插件才行。（Adobe已经宣布从2020开始停止Flash更新）。 1.介绍 canvas是一个标签，有一个默认的宽度，不需要了解。此时注意，如果我们要设置宽度、高度，必须设置在...
canvas设置圆点样式和颜色
06-13
你可以使用Canvas的API来设置圆点的样式和颜色。以下是一个简单的示例： ```js const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 设置圆点样式和颜色 ctx.fillStyle...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

俊小赞

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

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

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

打赏作者

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

抵扣说明：

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

余额充值