关于cvans绘画的探索

随聊 · 2023-10-22
关于cvans绘画的探索

为什么要研究html5 的 cvans 绘画?源于一个快速生产短视频的想法。

用html5的cvans 进行绘画

那么什么是cvans?

HTML 的 元素可通过 JavaScript 的 Canvas API 或 WebGL API 绘制图形及图形动画。

如何用cvans进行绘画?

当我们创建一个 元素的时候,我们需要用 width 和 height 属性来定义画布的大小(以像素为单位),而这个被定义的尺寸大小就是画布栅格。通常来说网格中的一个单元相当于 元素中的 1 像素。栅格的起点为左上角(坐标 (0, 0)) 。所有元素的位置都相对于原点定位,所以一个距离原点左边 x 像素、距离原点上边 y 像素的元素位置坐标为 (x, y)。

v2-733278838568b5401bde0f458b2fe4f8.jpg

现在,让我们来看看如何用 支持的两种图形(矩形和路径)来绘制不同的图形。

绘制矩阵: 我们可以用 fillRect(x, y, width, height) (绘制一个填充矩形)、 strokeRect(x, y, width, height) (绘制一个矩形的边框)或 clearRect(x, y, width, height) (清除指定矩形区域,让清除部分完全透明)来在 上绘制矩形。

绘制路径: 绘制路径的步骤有:

用 beginPath() 创建路径起点。
使用 moveTo(x, y) (将笔触移动到指定坐标上)、 lineTo(x, y) (绘制一条从当前位置到指定位置的直线)、 arc(x, y, radius, startAngle, endAngle, counterclockwise) (画一个以 (x, y) 为圆心、以 radius 为半径、从 startAngle 开始到 endAngle 结束、按照 counterclockwise 为指定方向的圆弧)、 arcTo(x1, y1, x2, y2, radius) (根据给的控制点和半径画一段圆弧,再以直线连接前一个点)、 quadraticCurveTo(xp1x, xp1y, x, y) (绘制以 (cp1x, cp1y)为控制点、 (x, y) 为结束点的二次贝塞尔曲线)和 bezierCurveTo(xp1x, cp1y, cp2x, cp2y, x, y) (绘制以 (cp1x, cp1y) 和 (cp2x, cp2y) 为控制点、以 (x, y) 为结束点的三次贝塞尔曲线)画出路径。

通过描边(stroke())或填充(fill())路径区域来渲染图形。

(可选)通过 closePath() (在当前位置画一条直线到起始点)来闭合路径。

️ 如果想要给你的绘制添加样式,我们可以应用色彩、线型、渐变和阴影。

色彩: 我们可以用 fillStyle 设置图形的填充颜色,用 strokeStyle 设置图形轮廓的颜色。
线型: 我们可以用 lineWidth 设置线条宽度,用 lineCap 设置线条末端样式,用 lineJoin 设定线条与线条间接合处的样式, 用 setLineDash() 设置虚线样式。
渐变: 我们可以用 createLinearGradient(x1, y1, x2, y2)、 createRadialGradient(x1, y1, r1, x2, y2, r2) 或 createConicGradient(angle, x, y) 来创建一个渐变对象,然后使用 addColorStop(position, color) 来给渐变对象添加色标。
阴影: 我们可以用 shadowOffsetX、 shadowOffsetY、 shadowColor 和 shadowBlur 属性来定义阴影。⚠️ shadowColor 属性的默认值是 transparent (透明)。

  1. eoxwphtjoc 2024-12-26

    《声生不息音乐派对(经典珍藏版)》大陆综艺高清在线免费观看:https://www.jgz518.com/xingkong/164879.html

  2. ehohttedjp 2024-12-01

    《夏之妹》剧情片高清在线免费观看:https://www.jgz518.com/xingkong/68605.html

  3. pfggtewhog 2024-11-24

    《医神华佗》香港剧高清在线免费观看:https://www.jgz518.com/xingkong/141284.html

Theme Jasmine by Kent Liao ICP备案: 粤ICP备2022080767号
广州上鱼文化传播有限公司版权所有