【canvas学习笔记三】样式和颜色

最新推荐文章于 2024-08-16 13:20:36 发布
最新推荐文章于 2024-08-16 13:20:36 发布
阅读量579 收藏 3
点赞数
原文链接：http://www.cnblogs.com/-867259206/p/7275864.html
版权

上一节我们学习了如何用路径绘制各种形状，但我们只能用默认的颜色和线条。这节就来学习设置不同的颜色和线条样式。

颜色

设置颜色主要有两个属性：

fillStyle = color
设置填充颜色
strokeStyle = color
设置描边颜色

颜色值可以用十六进制也可以用一些内置的颜色字符，还可以用rgb和rgba格式。

例子：

// these all set the fillStyle to 'orange'

ctx.fillStyle = 'orange';
ctx.fillStyle = '#FFA500';
ctx.fillStyle = 'rgb(255, 165, 0)';
ctx.fillStyle = 'rgba(255, 165, 0, 1)';

下面来看看一个填充颜色的例子和一个描边颜色的例子：

填充颜色示例

在下面这个例子中，我们创建了6X6的方块，每个方块都填充了不同的颜色。根据i、j的值，生成R通道和G通道的值，而B通道的值为固定值0。

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);
    }
  }
}
效果

image

描边颜色示例

这个例子和上一个例子类似。在这个例子中，R通道的值固定，G和B通道的值根据i、j的值变化。

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();
      }
    }
  }
效果

image

Tips：

如果没有设置fillStyle或strokeStyle，则默认的fillStyle或strokeStyle是黑色，如果设置了fillStyle或strokeStyle，则默认的颜色就变成设置的颜色。

透明

我们可以直接通过rgba的方式设置颜色从而实现透明的效果，如下：

// Assigning transparent colors to stroke and fill style

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

我们还可以设置全局的透明度，设置了全局透明度，之后绘制的图形都会是这个透明度。全局透明度的值是0~1。

globalAlpha = transparencyValue

例子

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 global transparency value
  ctx.globalAlpha = 0.2;

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

效果

image

线条样式

有很多属性和API可以设置线条的样式。

lineWidth = value
设置线条的宽度。
lineCap = type
设置线条端点的样式。
lineJoin = type
设置线条连接处的样式。
miterLimit = value
设置或返回最大斜接长度。
getLineDash()
获取当前虚线的样式，返回设置虚线的线宽数组。
setLineDash(segments)
设置当前虚线样式。
lineDashOffset = value
确定一条线从哪里开始是虚线。

lineWidth

线宽这个属性就是设置线的粗细。它的值不能是负数，单位是像素。默认值是1像素。
下面我们先来看一个例子：

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  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();
  }
}

效果：
image
注意看的话会发现，奇数位置的线条边缘有些模糊，这是因为位置不对，这就需要了解线生成的机制。
image
如图，图中一个方格表示一个像素。如果要在坐标（3,1）到坐标（3,5）之间画一条1像素宽的直线，那么线的宽度将会如图中第一张图的深蓝部分所示，左右的宽度只占半个像素。半个像素是无法绘制的，所以实际绘制的线条是第二章图所示的内容。它实际的位置并不正确。

lineCap

lineCap属性设置了线段端点的样式。它的值有三种：

butt （默认值）
端点是方的。
round
端点是圆的。
square
端点多出一个宽度和线宽一样，长度是线宽一般的方块。

三种样式从左到右如图：
image

lineJoin

这个属性设置了线段连接处的样式。
它的值有三种：

round
连接处是圆的。
bevel
连接处是一个三角形。
miter（默认值）
连接处是一个菱形。

从上到下效果如图：
image

miterLimit

miterlimit属性就是对上文miter作控制的一个属性。简单的说，miterlimit属性就是控制miter的大小的。
下面来简单说明一下它的效果：
image
image
image
上面三张图分别是miterlimit属性值为1、5、10时的效果。miterlimit属性实际上久时hi限制了连接处菱形的大小。

setLineDash(segments) && lineDashOffset

利用setLineDash(segments)方法和lineDashOffset属性就可以自己设置虚线的样式。
setLineDash(segments)接受一个数组作参数，数组的第一个元素规定了虚线中每一小段虚线的长度，第二个参数规定了虚线中每一小段虚线之间的间隔距离。
lineDashOffset设置了虚线样式是从哪里开始的。
下面用一个蚂蚁线的动画例子来说明一下它们的用法：

var ctx = document.getElementById('canvas').getContext('2d');
var offset = 0;

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

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

march();
效果

image
通过间隔一段时间增加lineDashOffset的方法达到虚线移动的效果。这个效果经常用来表示选中。

渐变

canvas可以创建渐变对象，将渐变对象赋值给strokeStyle或fillStyle，就可以画出渐变的颜色。
有两种渐变对象，一种是线性渐变，一种是径向渐变：

createLinearGradient(x1, y1, x2, y2)
创建线性渐变对象，从点(x1, y1)开始，至点(x2, y2)结束。
createRadialGradient(x1, y1, r1, x2, y2, r2)
创建径向渐变对象，参数是两个圆，一个圆圆心是(x1, y1)，半径是r1，另一个圆圆心是(x2, y2)，半径是r2。

例子：

var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);

这样就创建了渐变对象。然后用addColorStop方法添加颜色：

gradient.addColorStop(position, color)
position的值是0~1，这决定了颜色相对于渐变对象的位置，color是表示颜色的字符串，只要CSS中用来表示的颜色的方法都可以，比如十六进制、rgb或rgba。

线性渐变例子

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

  // Create gradients
  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
  lingrad.addColorStop(0, '#00ABEB');
  lingrad.addColorStop(0.5, '#fff');
  lingrad.addColorStop(0.5, '#26C000');
  lingrad.addColorStop(1, '#fff');

  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
  lingrad2.addColorStop(0.5, '#000');
  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');

  // assign gradients to fill and stroke styles
  ctx.fillStyle = lingrad;
  ctx.strokeStyle = lingrad2;
  
  // draw shapes
  ctx.fillRect(10, 10, 130, 130);
  ctx.strokeRect(50, 50, 50, 50);

}

效果

image

径向渐变例子

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

  // Create gradients
  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)');
  
  // draw shapes
  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);
}

效果

image

图案

现在介绍的这个方法可以用图片去填充图形。

createPattern(image, type)　　
这个方法创建并返回了一个pattern对象，image参数是CanvasImageSource，HTML图片元素、canvas或元素等等。type参数是一个字符串，决定了图片的使用方式。

type参数有如下几种值：

repeat
在垂直和水平方向上重复平铺图片。
repeat-x
水平平铺图片。
repeat-y
垂直平铺图片。
no-repeat
不平铺重复图片。

pattern对象的创建方法和渐变对象类似：

var img = new Image();
img.src = 'someimage.png';
var ptrn = ctx.createPattern(img, 'repeat');

注意

这个方法和drawImage类似，要确保图片加载完，否则图片不能显示。

例子

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

  // create new image object to use as pattern
  var img = new Image();
  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
  img.onload = function() {

    // create pattern
    var ptrn = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0, 0, 150, 150);

  }
}

效果

image

阴影

阴影涉及四个属性：

shadowOffsetX = float
阴影水平方向距离。默认值为0。不受transform变换矩阵影响。
shadowOffsetY = float
阴影垂直方向距离。默认值为0。不受transform变换矩阵影响。
shadowBlur = float
阴影模糊大小。默认值为0。模糊数值并不是模糊的像素的大小，是模糊的程度。不受transform变换矩阵影响。
shadowColor = color
阴影颜色。默认值是全透明黑色。

例子

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

  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;
  ctx.shadowBlur = 2;
  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
 
  ctx.font = '20px Times New Roman';
  ctx.fillStyle = 'Black';
  ctx.fillText('Sample String', 5, 30);  // 后面两个参数是x, y坐标
}

效果

image

Canvas填充规则

如果两个路径交叉或重叠，我们可以设置填充的方式。
参数有两种：

"nonzero": 默认值，按照non-zero winding rule规则填充。
"evenodd": 按照even-odd winding rule规则填充。

例子

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d'); 
  ctx.beginPath(); 
  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
  ctx.fill('evenodd');
}

效果

image

转载于:https://www.cnblogs.com/-867259206/p/7275864.html

diaoji4196
关注
canvas学习笔记
darabiuz的博客
03-25 1897
1. 什么是canvas 是h5新增的一个标签，可以通过js在这个标签上绘制各种图案，可以通过js在这个标签上绘制各种图案 拥有多种绘制路径、矩阵、原形、字符以及图片的方法 1. canvas使用步骤 创建一个canvas标签 通过js拿到canvas标签 从cavas标签中获取到绘图工具 通过绘图工具在canvas标签上绘制图形 以绘制一条直线为例子 4-1. 设置路径的起点 4-2. 设置路径的终点 4-3. 告知canvas连接这两个点 <script> //
canvas学习笔记（三）----使用样式和颜色
zhangyr的博客
11-08 437
//颜色 fillStyle = color;//设置图形的填充颜色 ctx.fillStyle strokeStyle = color;//设置图形轮廓的颜色 ctx.strokeStyle globalAlpha = transparencyValue;//设置填充颜色或轮廓颜色的透明度 ctx.globalAlpha //线条样式 lineWidth = value;//...
学习Canvas基础-添加颜色、线性渐变和径向渐变
qq_67983277的博客
11-19 2030
学习Canvas基础-添加颜色、线性渐变和径向渐变
关于canvas和canvas案例
weixin_50736511的博客
04-07 790
Canvas常见API 1.this.canvas.getContext(‘2d’) 初始化画布 // 获取canvas元素 this.canvas = document.getElementById('tutorial') // 获取绘制二维上下文 this.ctx = this.canvas.getContext('2d') 2.this.ctx.moveTo ，this.ctx.lineTo(150, 50) moveTo 移动画笔到具体某个位子 lineTo 画线条到具体某个位置 this.c
Canvas基础: fillStyle和strokeStyle示例
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-16 1386
这些属性不仅提供了基本的图形绘制功能，还可以与多种技术结合使用，以创建复杂和吸引人的视觉效果。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。属性决定了图形内部的颜色。在这篇文章中，我们将深入探讨这两个属性的使用方法，并通过多个示例来展示它们的实际应用场景。方法来创建一个重复的图案纹理，并将其设置为填充色。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，在这个示例中，我们绘制了一个红色填充蓝色描边的圆形。
fillstyle属性_HTML canvas
weixin_33273250的博客
12-24 238
HTML canvas fillStyle 属性实例定义用红色填充的矩形：Yourbrowserdoesnotsupportthecanvastag.JavaScript：var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(20,20,15...
canvas绘制跑马灯lineDashOffset、lineDashOffset
编程界明世隐的博客
01-15 1583
var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300'; var ctx = canvas.getContext('2d'); var offset=0; function draw(){ ctx.clearRect(0,0, canvas.width, canvas.height); ctx.setLineDash([10,4, 2]);//实线..
学习canvas基础的总结
weixin_33739541的博客
12-19 216
简单介绍canvas <canvas>与<img>标签很像，但是没有src和alt属性，只有width和height属性。 css定义的尺寸与canvas的尺寸比例不一致时，会出现扭曲。 canvas起初是空白的，要找到渲染上下文来绘制。 getContext() 该方法用来获取渲染上下文和绘制功能。 var canvas = document.getElementById...
canvas学习笔记之绘制简单路径
09-22
3. `stroke()`：最后调用`stroke()`方法，根据当前设置的线条样式（颜色、宽度等），绘制出从上一个`moveTo`或`lineTo`的点到当前点的线段。如果想要清除之前绘制的路径，可以使用`beginPath()`方法开始一个新的路径...
HTML5 Canvas学习笔记(5)游戏得分动画
08-06
这篇“HTML5 Canvas学习笔记(5)游戏得分动画”着重讲解了如何利用Canvas技术来实现游戏中的得分动画效果。通过学习这篇笔记，我们可以深入了解Canvas的基本用法以及如何将它应用于游戏开发。 首先，Canvas是HTML5的...
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
08-06
在“HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体”这篇博文中，作者深入探讨了如何利用Canvas技术来实现菜单项的高亮显示以及如何处理像素字体，这两点在构建具有视觉吸引力和用户友好性的Web应用时非常重要。...
【WebGIS】Openlayers流动线与风场效果
weixin_42029283的博客
12-02 3578
【WebGIS】Openlayers流动线与风场效果
openlayers 好玩的效果之流动线
往事随风的博客
07-09 3075
vue openlayers 流动线效果
canvas 知识总结（一）
weixin_46828094的博客
11-08 981
canvas 知识点总结（一）
【React】16课 react路由Route超简单小项目
舜岳的博客
07-14 763
项目效果图如下： 首先我们来看一下简单的项目文件目录结构： 首先我们来看一下App根组件内的路由策略写法： BrowerserRouter 标签 它的原理是使用HTML .5 history API (pushState, replaceState, popState)来使你的内容随着ur动态改变的，如果放在一级目录下给BrowerserRouter增加个属性 Switch 标签 会用来...
jtopo连线绘制脉冲动画效果
andsll的专栏
08-05 1722
随着需求的日益精细化，人们越来越多的关注到了画面的美观，单纯的节点间连线已经不满足人们的审美观念了，那么能不能让节点间的连线动起来呢？答案是可以的，老规矩，先上图，再说怎么实现。 同样，这次的改动也是基于jtopo-0.4.8-dev版本，有很多小伙伴留言问我能不能提供源代码下载，我这边也很想直接给大家一个可用的新版本，但是为了提高性能，目前我已经在0.4.8的基础上增加了太多与我们项目有关的东西了，想要直接分离出来一个新的版本还是比较困难的，所以说只能看后面有没有机...
绘制虚线－－CGContextSetLineDash详解
学如逆水行舟
08-03 1683
绘图第三篇：CGContextSetLineDash 绘制虚线 就是上边的这个API，怎么用呢？看下边demo: 效果图：
Canvas填充样式fillStyle
Paige's Blog
05-19 3742
渐变色 线性渐变色：                          var grd=context.createLinearGradient(xstart,ystart,xend,yend) grd.addColorStop(stop,color) -stop:决定位置 -color:颜色 window.onload=function(){ var can
ECHARTS 之CANVAS设置地图背景图
hsany330的专栏
07-14 1507
实现效果如下： echarts效果实现参考：echarts地图连线动效之（一） 接下来说这个背景图是如何利用canvas实现的： 首先在初始化echarts后增加下面代码： `` var chart = echarts.init(document.getElementById("beijing")); var img = new Image(); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值