canvas详解 - 样式篇

canvas详解 - 样式篇

是一个可以使用 js 来绘制图形的 HTML 元素。例如,它可以用于绘制图表、制作图片构图或者制作简单的动画。

<style>
  #demo {
    border: 1px solid #000;
  }
style>
<canvas width="150" height="150" id="demo">canvas>

canvas只有两个属性widthheight。当没有设置宽度和高度的时候,canvas 会默认宽度为 300 像素和高度为 150 像素。该元素可以使用CSS来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸:如果 CSS 的尺寸与初始画布的比例不一致,它会出现扭曲(可以尝试在canvas标签设置 widthheight 属性)。当开始时没有为 canvas 规定样式规则,其将会完全透明。

例如下图:
canvas详解 - 样式篇_第1张图片

为了展示,首先js需要找到渲染上下文,然后在它的上面绘制。 元素有一个叫做 getContext() 的方法,这个方法是用来获得渲染上下文和它的绘画功能。getContext()接受一个参数,即上下文的类型。

const canvas = document.getElementById('demo');
const ctx = canvas.getContext('2d');
console.log(ctx);

canvas详解 - 样式篇_第2张图片

颜色填充

默认的填充颜色都是黑色,下面我们来看看如何设置其他颜色.

  • fillStyle = color: 设置图形的填充颜色。
  • strokeStyle = color: 设置图形轮廓的颜色。
  • fillRect(): 绘制填充矩形

fillStyle、strokeStyle

一旦设置了 strokeStyle 或者 fillStyle 的值,那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色,你需要重新设置 fillStylestrokeStyle 的值。

ctx.beginPath();
ctx.strokeStyle = "red";
ctx.moveTo(10,10);
ctx.lineTo(10,100);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(20,10);
ctx.lineTo(20,100);
ctx.stroke();

canvas详解 - 样式篇_第3张图片

上面的例子可以看到,即便只是在其中一条线上设置了红色,然后调用beginPath重新起了一个路径列表第二条线条也照样是红色,这时候想改变颜色只能重新设置.

fillStyle同理:

ctx.beginPath();
ctx.fillStyle = "red";
ctx.moveTo(20, 20);
ctx.lineTo(20, 50);
ctx.lineTo(80, 50);
ctx.fill();

ctx.beginPath();
ctx.moveTo(20, 60);
ctx.lineTo(20, 90);
ctx.lineTo(80, 90);
ctx.fill();

canvas详解 - 样式篇_第4张图片

fillRect

fillRect与前两个不同,用于填充一个矩形,是一个方法,接受下面的参数:

  • x: 矩形起始点的 x 轴坐标。
  • y: 矩形起始点的 y 轴坐标。
  • width: 矩形的宽度。
  • height: 矩形的高度。
ctx.fillStyle = 'red';
ctx.fillRect(20, 10, 110, 100);

canvas详解 - 样式篇_第5张图片

当然也可以填充整个画布。这样做通常的目的是在开始绘制其他内容前设置一个背景。为了达到这样的效果,需要让填充的范围和画布的范围相同即可(ctx.fillRect(0, 0, canvas.width, canvas.height);).由于这个方法是直接在画布上绘制填充,并不修改当前路径,所以在这个方法后面调用 fill() 或者stroke()方法并不会对这个方法有什么影响。

样式

可以通过下面一系列属性来设置线的样式。

  • lineWidth: 设置线条宽度。
  • lineCap: 设置线条末端样式。
  • lineJoin: 设定线条与线条间接合处的样式。
  • miterLimit: 限制当两条线相交时交接处最大长度;所谓交接处长度(斜接长度)是指线条交接处内角顶点到外角顶点的长度。

lineWidth

描述线段宽度的数字(Number或者可以通过Number()方法转成Number类型的字符串数字)。(0、负数、 InfinityNaN 会被忽略)

ctx.beginPath();
ctx.lineWidth = '10';
ctx.moveTo(10,10);
ctx.lineTo(10,100);
ctx.stroke();

canvas详解 - 样式篇_第6张图片

lineCap

绘制每一条线段末端的属性。有 3 个可能的值,分别是:butt, roundsquare

  • butt: 线段末端以方形结束, 默认值是 butt
  • round: 线段末端以圆形结束。
  • square: 线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域。
ctx.beginPath();
ctx.lineWidth = 15;
['butt', 'round', 'square'].forEach((lineCap, i) => {
  ctx.lineCap = lineCap;
  ctx.beginPath();
  ctx.moveTo(25 + i * 50, 10);
  ctx.lineTo(25 + i * 50, 140);
  ctx.stroke();
});

canvas详解 - 样式篇_第7张图片

可以看到绘制了 3 条线段,每条线段都设置了不同的 lineCap 属性值,通过红框可以很明显看到第二条线段使用了 round 选项,在线段末端增加了一个半径为线短宽度一半的半圆。右侧的线段使用了 square 选项,增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域。

lineJoin

用来设置 2 个长度不为 0 的相连部分(线段、圆弧、曲线)如何连接在一起的属性(长度为 0 的变形部分,其指定的末端和控制点在同一位置,会被忽略)。

有 3 个可能的值:

  • round: 通过填充一个额外的,圆心在相连部分末端的扇形,绘制拐角的形状。圆角的半径是线段的宽度。
  • bevel: 在相连部分的末端填充一个额外的以三角形为底的区域,每个部分都有各自独立的矩形拐角。
  • miter: 通过延伸相连部分的外边缘,使其相交于一点,形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果。
ctx.beginPath();
ctx.lineWidth = '10';
["round", "bevel", "miter"].forEach((join, i) => {
  ctx.lineJoin = join;
  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();
});

canvas详解 - 样式篇_第8张图片

miterLimit

用于设置斜接面限制比例.当获取属性值时,会返回当前的值(默认值是10.0 )。当给属性赋值时,0、负数、 InfinityNaN 都会被忽略;除此之外都会被赋予一个新值。

语法:

ctx.miterLimit = value;

其他方法

  • getLineDash(): 返回一个包含当前虚线样式,长度为非负偶数的数组。
  • setLineDash(segments): 设置当前虚线样式。
  • lineDashOffset: 设置虚线样式的起始偏移量。

你可能感兴趣的:(javascript,html,javascript,html5,前端)