Canvas详细使用方法(二)
创始人
2024-06-02 04:59:02
0

线型 Line styles

lineCap: 属性的值决定了线段端点显示的样子。它可以为下面的三种的其中之一:

  • butt 截断,默认是 butt。
  • round 圆形
  • square 正方形
    lineJoin: 属性的值决定了图形中线段连接处所显示的样子。它可以是这三种之一:
  • round 圆形
  • bevel 斜角
  • miter 斜槽规,默认是 miter。

在这里插入图片描述



Document

你的浏览器不兼容Canvas,请升级您的浏览器!


在这里插入图片描述



Document

你的浏览器不兼容Canvas,请升级您的浏览器!


在这里插入图片描述

绘制文本

canvas 提供了两种方法来渲染文本

  • fillText(text, x, y [, maxWidth])
    • 在 (x,y) 位置,填充指定的文本
    • 绘制的最大宽度(可选)。
  • strokeText(text, x, y [, maxWidth])
    • 在 (x,y) 位置,绘制文本边框
    • 绘制的最大宽度(可选)。
      文本的样式(需在绘制文本前调用)
  • font = value: 当前绘制文本的样式。这个字符串使用和 CSS font 属性相同的语法。默认的字体是:10px sans-serif
  • textAlign = value:文本对齐选项。可选的值包括:start, end, left, right or center. 默认值是 start
  • textBaseline = value:基线对齐选项。可选的值包括:top, hanging, middle, alphabetic, ideographic, bottom。
    • 默认值是 alphabetic


Document

你的浏览器不兼容Canvas,请升级您的浏览器!


在这里插入图片描述

绘制图片

绘制图片,可以使用 drawImage 方法将它渲染到 canvas 里。drawImage 方法有三种形态:

  • drawImage(image, x, y)
    • 其中 image 是 image 或者 canvas 对象,x 和 y 是其在目标 canvas 里的起始坐标
  • drawImage(image, x, y, width, height)
    • 这个方法多了 2 个参数:width 和 height,这两个参数用来控制 当向 canvas 画入时应该缩放的大小
  • drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
    • 第一个参数和其它的是相同的,都是一个图像或者另一个 canvas 的引用。前 4 个是定义图像源的切片位置和大小,后 4 个则是定义切片的目标显示位置和大小

图片的来源,canvas 的 API 可以使用下面这些类型中的一种作为图片的源

  • HTMLImageElement:这些图片是由Image()函数构造出来的,或者任何的< img >元素
  • HTMLVideoElement:用一个 HTML 的 < video >元素作为你的图片源,可以从视频中抓取当前帧作为一个图像。
  • HTMLCanvasElement:可以使用另一个 < canvas > 元素作为你的图片源。

在这里插入图片描述



Document

你的浏览器不兼容Canvas,请升级您的浏览器!


Canvas绘画状态-保存和恢复

Canvas绘画状态

  • 是当前绘画时所产生的样式和变形的一个快照。
  • Canvas在绘画时,会产生相应的绘画状态,其实我们是可以将某些绘画的状态存储在栈中来为以后复用。
  • Canvas 绘画状态的可以调用 save 和 restore 方法是用来保存和恢复,这两个方法都没有参数,并且它们是成对存在的
    保存和恢复(Canvas)绘画状态
  • save():保存画布 (canvas) 的所有绘画状态
  • restore():恢复画布 (canvas) 的所有绘画状态
    Canvas绘画状态包括:
  • 当前应用的变形(即移动,旋转和缩放)
  • 以及这些属性:strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit,shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign, textBaseline …
  • 当前的裁切路径(clipping path)


Document

你的浏览器不兼容Canvas,请升级您的浏览器!


在这里插入图片描述

变形 Transform

Canvas和CSS3一样也是支持变形,形变是一种更强大的方法,可以将坐标原点移动到另一点、形变可以对网格进行旋转和缩放
Canvas的形变有4种方法实现:

  • translate(x, y):用来移动 canvas 和它的原点到一个不同的位置。
    • x 是左右偏移量,y 是上下偏移量(无需要单位),如右图所示。
  • rotate(angle):用于以原点为中心旋转 canvas,即沿着z轴旋转。
    • angle是旋转的弧度,是顺时针方向,以弧度为单位
  • scale(x, y):用来增减图形在 canvas 中像素数目,对图形进行缩小或放大。
    • x 为水平缩放因子,y 为垂直缩放因子。如果比 1 小,会缩小图形,如果比 1 大会放大图形。默认值为 1,也支持负数。
  • transform(a, b, c, d, e, f): 允许对变形矩阵直接修改。这个方法是将当前的变形矩阵乘上一个基于自身参数的矩阵。
    注意事项:
  • 在做变形之前先调用 save 方法保存状态是一个良好的习惯。
  • 大多数情况下,调用 restore 方法比手动恢复原先的状态要简单得多。
  • 如果在一个循环中做位移但没有保存和恢复canvas状态,很可能到最后会发现有些东西不见了,因为它很可能已超出canvas画布以外了。
  • 形变需要在绘制图形前调用。
    在这里插入图片描述

移动-translate

translate方法,它用来移动 canvas 和它的原点到一个不同的位置。

  • translate(x, y)
    • x 是左右偏移量,y 是上下偏移量(无需单位)。
      移动 canvas 原点的好处
  • 如不使用 translate方法,那么所有矩形默认都将被绘制在相同的(0,0)坐标原点。
  • translate方法可让我们任意放置图形,而不需要手工一个个调整坐标值
    移动矩形案例
  • 第一步:先保存一下canvas当前的状态
  • 第二步:在绘制图形前translate移动画布
  • 第三步:开始绘制图形,并填充颜色

在这里插入图片描述



Document

你的浏览器不兼容Canvas,请升级您的浏览器!


在这里插入图片描述

旋转-rotate

rotate方法,它用于以原点为中心旋转 canvas,即沿着 z轴 旋转。

  • rotate(angle)
    • 只接受一个参数:旋转的角度 (angle),它是顺时针方向,以弧度为单位的值。
    • 角度与弧度的 JS 表达式:弧度=( Math.PI / 180 ) * 角度 ,即 1角度 = Math.PI/180 个弧度
    • 比如:旋转90°:Math.PI / 2; 旋转180°:Math.PI ; 旋转360°:Math.PI * 2; 旋转-90°:-Math.PI / 2;
    • 旋转的中心点始终是 canvas 的原坐标点,如果要改变它,我们需要用到 translate方法。
      旋转案例
  • 第一步:先保存一下Canvas当前的状态,并确定旋转原点
  • 第二步:在绘制图形前旋转画布(坐标系会跟着旋转了)
  • 第三步:开始绘制图形,并填充颜色
    在这里插入图片描述
    在这里插入图片描述


Document

你的浏览器不兼容Canvas,请升级您的浏览器!


在这里插入图片描述

缩放-scale

**scale方法可以缩放画布。**可用它来增减图形在 canvas 中的像素数目,对图形进行缩小或者放大

  • scale(x, y)
    • x 为水平缩放因子,y 为垂直缩放因子,也支持负数。
    • 如果比 1 小,会缩小图形,如果比 1 大会放大图形。默认值为 1。
      注意事项
  • 画布初始情况下,是以左上角坐标为原点。如果参数为负实数,相当于以 x 或 y 轴作为对称轴镜像反转。
    • 例如,使用translate(0, canvas.height); scale(1,-1); 以 y 轴作为对称轴镜像反转。
  • 默认情况下,canvas 的 1 个单位为 1 个像素。如果我们设置缩放因子是 0.5,1 个单位就变成对应 0.5 个像素,这样绘制出
    来的形状就会是原先的一半。同理,设置为 2.0 时,1 个单位就对应变成了 2 像素,绘制的结果就是图形放大了 2 倍。
    缩放案例实战
  • 第一步:先保存一下Canvas当前的状态,并确定缩放原点
  • 第二步:在绘制图形前缩放画布
  • 第三步:开始绘制图形,并填充颜色

在这里插入图片描述


Document你的浏览器不兼容Canvas,请升级您的浏览器!

在这里插入图片描述

相关内容

热门资讯

oppo安卓11.1系统新功能... 你知道吗?最近OPPO手机又来了一次大升级,安卓11.1系统的新功能简直让人眼前一亮!今天,就让我带...
win10系统和安卓系统的,全... 你有没有发现,现在手机和电脑的操作系统真是五花八门,让人挑花了眼?今天,咱们就来聊聊两个超级热门的系...
安卓怎么设置重力系统,安卓重力... 你有没有发现,有时候手机屏幕上的图标会自动旋转,就像有看不见的小手在帮你翻书一样?这就是安卓手机的重...
图片管家推荐安卓系统,图片管家... 手机里的图片是不是越来越多,乱糟糟的找不到?别急,今天就来给你安利一款超好用的安卓系统图片管家——它...
安卓2.3系统宣传片,无限可能 你有没有注意到,手机的世界里,有时候一个小小的系统更新就能掀起一阵热潮呢?今天,就让我带你穿越回那个...
有关安卓和苹果系统提问,全面对... 你有没有想过,为什么你的手机里装的是安卓系统,而你的朋友用的是苹果?是不是好奇这两个系统有什么不同?...
安卓系统清理排行榜,助你手机焕... 手机里的安卓系统是不是越来越慢了?别急,今天就来给你揭秘一下安卓系统清理排行榜,让你手机瞬间恢复活力...
安卓系统app自动启动不了,安... 手机里的安卓系统APP突然不自动启动了,这可真是让人头疼啊!你是不是也遇到了这种情况?别急,今天就来...
ios系统和安卓系统哪个才是未... 说到手机操作系统,你是不是也和我一样,对iOS系统和安卓系统哪个才是未来充满了好奇呢?毕竟,这两个系...
最丝滑的安卓系统,最丝滑安卓系... 你有没有想过,手机系统就像是我们生活中的调味品,有时候平淡无奇,有时候却让人回味无穷。今天,就让我带...
笔记本安卓系统下载,下载与使用... 你有没有想过,你的安卓笔记本也能拥有一个全新的操作系统呢?没错,就是那种可以让你在笔记本上畅游安卓世...
老年人安卓手机系统,畅享智能生... 你有没有发现,身边越来越多的老年人开始玩起了智能手机呢?这不,最近我注意到,他们中很多人选择了安卓手...
安卓手机系统大改造,重塑未来 你有没有发现,最近你的安卓手机好像变得不一样了?没错,安卓手机系统正在经历一场大改造,就像换上了新装...
能安装安卓应用的系统,探索无限... 你有没有想过,为什么你的手机可以安装那么多好玩的应用,而电脑就只能用那些固定的软件呢?其实,现在有一...
安卓系统备份备忘录,轻松备份与... 你有没有想过,那些藏在安卓手机里的备忘录,它们就像是你生活中的小秘密,随时准备着为你提供帮助?今天,...
欧沃手机安卓系统,畅享智能生活... 你有没有发现,最近手机市场又掀起了一股热潮?没错,就是欧沃手机!这款手机凭借其出色的性能和亲民的价格...
安卓4.4系统tv软件,探索安... 亲爱的读者们,你是否曾为家里的电视屏幕增添一些智能的魔力而烦恼?别担心,今天我要给你带来一个超级实用...
安卓系统的研究人物,安卓系统发... 你知道吗?在科技飞速发展的今天,安卓系统可是占据了智能手机市场的大半壁江山。而在这片广阔的天地里,有...
山寨苹果刷会安卓系统,安卓系统... 你知道吗?在科技圈里,总有一些让人眼前一亮的小秘密。今天,我要给你揭秘一个关于山寨苹果刷安卓系统的神...
安卓系统新用户登录,畅享智能生... 你刚刚入手了一台全新的安卓手机,是不是有点小激动呢?别急,别急,让我来给你详细介绍一下安卓系统新用户...