canvas笔记--色彩篇

最新推荐文章于 2023-12-16 11:25:04 发布

努力的豌豆芽

最新推荐文章于 2023-12-16 11:25:04 发布

阅读量146

点赞数

本文链接：https://blog.csdn.net/qq_44758643/article/details/108752709

版权

色彩

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, 165, 0, 1)';

fillStyle例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i = 0; i < 6; i++) {
    for (var j = 0; j < 6; j++) {
      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' +
                       Math.floor(255 - 42.5 * j) + ', 0)';
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
    </script>
</html>

效果：

在这里插入图片描述

strokeStyle例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
 function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    for (var i = 0; i < 6; i++) {
      for (var j = 0; j < 6; j++) {
        ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' + 
                         Math.floor(255 - 42.5 * j) + ')';
        ctx.beginPath();
        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
        ctx.stroke();
      }
    }
  }
    </script>
</html>

效果：

在这里插入图片描述

透明度

globalAlpha属性或为笔触和/或填充样式分配半透明颜色来完成。

globalAlpha = transparencyValue

将指定的透明度值应用于画布上绘制的所有将来形状。该值必须介于0.0（完全透明）到1.0（完全不透明）之间。默认情况下，此值为1.0（完全不透明）。

ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';

例子：

绘制四个不同颜色的正方形绘制一个圆设置半通明

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  // draw background
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0, 0, 75, 75);
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75, 0, 75, 75);
  ctx.fillStyle = '#09F';
  ctx.fillRect(0, 75, 75, 75);
  ctx.fillStyle = '#F30';
  ctx.fillRect(75, 75, 75, 75);
  ctx.fillStyle = '#FFF';

  // set transparency value
  ctx.globalAlpha = 0.2;

  // Draw semi transparent circles
  for (var i = 0; i < 7; i++) {
    ctx.beginPath();
    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
    ctx.fill();
  }
}
    </script>
</html>

效果：

在这里插入图片描述

实例rgba

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  // 绘制背景
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // 绘制半透明矩形
  for (var i = 0; i < 10; i++) {
    ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')';
    for (var j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
    </script>
</html>

在这里插入图片描述

努力的豌豆芽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas笔记--色彩篇

色彩fillStyle和strokeStylefillStyle=color设置填充形状时使用的样式strokeStyle=color设置形状轮廓时填充的样式color与css中的color一样**注意：**这两个颜色设置一次后其后面的颜色默认是设置的颜色除非重新更改ctx.fillStyle = 'orange';ctx.fillStyle = '#FFA500';ctx.fillStyle = 'rgb(255, 165, 0)';ctx.fillStyle = 'rgba(255
复制链接

扫一扫