canvas 怎样绘图直线的完成方式

日期:2020-12-11 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

学习培训canvas,最先获知道怎样去绘图直线,随后才可以根据许多简易的直线去完成较为繁杂的图型,例如普遍的图表,柱状图,折线图等全是根据1段1段的直线完成的。

基本专业知识

canvas 的基本专业知识不算多,关键把握怎样绘图直线,图型,照片,文字等。canvas能够在访问器中绘图,还可以依靠 node-canvas在node服务端绘图简易的照片。本文只纪录在访问器中绘图,至于在node端怎样绘图,自身能够去查询有关材料。

在访问器中绘图,就先在html中界定canvas元素,默认设置宽高是300 * 150,能够根据widthheight设定。留意canvas元素款式宽高和canvas制图画布宽高并不是1个物品,这块将在之后说的。

<canvas id="canvas">
  <p>当今访问器不适用canvas,请升級访问器</p>
</canvas>

在绘图以前,大家要先获得当今canvas的2d绘图左右文context,后续一直根据实际操作context来开展绘图。

let canvas = document.querySelector('#canvas');
if (!canvas) {
  throw new Error('can not find canvas element');
}
// 留意2d.主要参数务必是小写的;
// 根据设定主要参数为webgl,能够获得3d绘图左右文
let ctx = canvas.getContext('2d');

注:后续示例中会忽视上面的编码片断,立即应用 ctx 自变量表明canvas的2d绘图左右文。

再看来看canvas 2d绘图中的座标系统软件,当今canvas元素左上角为座标原点(0,0),水平向右为X轴正方位,竖直向下为Y轴正方位,以下图。能够根据平移(translate),转动(rotate),放缩(scale)来实际操作座标系,完成1些动漫,这一部分将在动漫专业知识一部分详尽解读。

直线

在绘图1条简易的直线时,1般会先设定直线的款式,例如,色调,线条宽度,线条节点款式等,大家根据设定strokeStyle来设定ctx的全局性绘图款式,能够是rgba或合理合法的16进制色调值,或渐变色目标等。以下编码简易的绘图了1条从(10,10)到(50,60)的,宽度为10的,鲜红色的直线。

ctx.strokeStyle = 'red';
ctx.lineWidth = 10;
ctx.moveTo(10, 10);
ctx.lineTo(50, 60);
ctx.stroke();

先看看与绘图直线有关的方式和特性,

有关特性:

  • lineCap,该值告知访问器怎样绘图直线的节点,可选值为下列3个之1:butt,round,square。默认设置为butt。
  • lineWidth,该值决策了直线的像素宽度。务必为非负,非无限,默认设置为1.0。
  • lineJoin,决策了两条直线交叉时怎样绘图聚焦点,仅有当两条直线方位不一样时,才会起效。可赋值:bevel,round,miter。默认设置值是miter。
  • miterLimit,告知访问器怎样绘图miter方式的直线聚焦点,仅有当lineJoin='miter'合理,默认设置为10.0。
  • lineDashOffset,设定虚线偏位量,默认设置为0.0。

有关方式:

  • beginPath,将当今相对路径当中的全部子相对路径都要消除掉,以此来重设当今相对路径。1般在绘图闭合图型时要先启用。
  • closePath ,显示信息的封闭式某段相对路径。该方式用于封闭式圆弧相对路径和由曲线图或直线所建立的对外开放相对路径。
  • moveTo,挪动当今绘图点到特定的座标。
  • lineTo,从上1个点绘图1条到特定座标点的直线。
  • setLineDash,用来设定虚线的方式,主要参数是1个数字能量数组,说明绘图实线的长度,和实线之间的空隙的长度。

试试用设定不一样的lineCap 值来绘图一样的直线

ctx.lineWidth = 10;
ctx.textAlign = 'center';
let colors = ['red', 'green', 'blue'];
let lineCaps = ['butt', 'round', 'square'];
for (let [index, lc] of lineCaps.entries()) {
  ctx.strokeStyle = colors[index]; //设定直线的色调
  ctx.lineCap = lc; // 设定lineCap
  ctx.beginPath(); // 清空当今相对路径
  ctx.moveTo(10, 20 + 20 * index);
  ctx.lineTo(50, 20 + 20 * index);
  ctx.stroke();
  ctx.fillText(lc, 80, 25 + 20 * index);
}

从上图結果能够看出,再将lineCap设定为round 和square时会在原直线的两边再加1定长度的节点,只但是round是圆弧款式,square是矩形框款式。必须留意的1点是,在canvas绘图左右文中同1時刻只能存在1个当今相对路径,以便绘图不一样的直线,务必在每次绘图以前启用beginPath()来清空当今线路,刚开始新的相对路径。

再来试试用不一样的lineJoin值来绘图两个直线聚焦点处的款式

ctx.lineWidth = 20;
ctx.textAlign = 'center';
ctx.lineCap = 'butt';
let colors = ['red', 'green', 'blue'];
let lineJoins = ['bevel', 'round', 'miter'];
for (let [index, lj] of lineJoins.entries()) {
  ctx.strokeStyle = colors[index]; //设定直线的色调
  ctx.lineJoin = lj; //设定lineJoin
  ctx.beginPath(); //清空当今相对路径
  ctx.moveTo(10 + 80 * index, 20);
  ctx.lineTo(50 + 80 * index, 20);
  ctx.lineTo(50 + 80 * index, 60);
  ctx.stroke();
  ctx.fillText(lj, 40 + 80 * index, 80);
}

能够看到,3种lineJoin在解决两条直线的聚焦点处的不一样。在其中,在设定lineJoin="miter"时,根据设定miterLimit特性能够设定斜接线的长度与2分之1线宽的最大比值,当超出这个比值时,则lineJoin会选用bevel方法。

canvas不但能够绘图实线,还能够绘图虚线。绘图虚线,根据设定lineDashOffset特性和启用setLineDash()方法。

ctx.lineWidth = 10;
ctx.textAlign = 'center';
ctx.setLineDash([8, 8]); //表明实线一部分8个像素,空隙一部分8个像素
let colors = ['red', 'green', 'blue'];
let lineDashOffsets = [1, 2, 4];
for (let [index, ldOffset] of lineDashOffsets.entries()) {
  ctx.strokeStyle = colors[index]; //直线色调
  ctx.lineDashOffset = ldOffset; //设定了偏位量
  ctx.beginPath();
  ctx.moveTo(10, 20 + 20 * index);
  ctx.lineTo(100, 20 + 20 * index);
  ctx.stroke();
  ctx.fillText(`lineDashOffset:${ldOffset}`, 160, 25 + 20 * index);
}

从图能够看到lineDashOffset便是设定的刚开始绘图虚线的偏位量。setLineDash()方式,接纳1个数字能量数组主要参数,假如数字能量数组个数是单数,则会默认设置把当今数字能量数组元素拷贝1份,使之变为偶数。从第0个元素,表明实线一部分长度,第1个元素,表明空隙一部分长度,第2个元素,表明实线一部分长度,第3个元素,表明空隙一部分长度,假如到数字能量数组最终1个元素了,又会从头开始刚开始,以此类推。

ctx.lineWidth = 10;
ctx.textAlign = 'center';
let colors = ['red', 'green', 'blue', 'gray'];
let lineDashes = [[20, 20], [40, 40], [20, 40], [20, 40, 20]];
for (let [index, ld] of lineDashes.entries()) {
  ctx.strokeStyle = colors[index]; //设定色调
  ctx.setLineDash(ld); //设定lineDash
  ctx.beginPath();
  ctx.moveTo(10, 20 + 20 * index);
  ctx.lineTo(171, 20 + 20 * index);
  ctx.stroke();
  ctx.fillText(`lineDashes:[${ld}]`, 240, 25 + 20 * index);
}

let lineDashOffset = 0; //原始lineDashOffset
ctx.strokeStyle = 'green';
function animate() {
  if (lineDashOffset > 25) {
    lineDashOffset = 0;
  }
  ctx.clearRect(0, 0, width, height); //清空当今canvas
  ctx.lineDashOffset = -lineDashOffset; //设定lineDashOffset
  ctx.setLineDash([4, 4]); // 设定实线长度和空隙长度
  ctx.rect(20, 20, 100, 100); //绘图1个矩形框
  ctx.stroke(); //对canvas当今相对路径描边
  lineDashOffset += 1; //lineDashOffset偏位加1
  window.requestAnimationFrame(animate); //用访问器帧速度来不断实行animate涵数
}
animate();

小结

绘图直线时,要了解canvas当今相对路径定义,某1時刻,canvas中当今相对路径仅有1条,在刚开始新的相对路径时,务必启用beginPath()。能够根据设定lineWidthlineCaplineJoin设定直线的绘图款式。在描边直线时,能够根据strokeStyle来设定直线的色调。

canvas中不但能够绘图实线,还能够根据lineDashOffsetsetLineDash()来绘图虚线。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。