【Godot4.2】CanvasItem绘图函数全解析 - 1.绘制简单图形

已于 2024-04-14 01:49:35 修改
阅读量763 收藏 29
点赞数 31
分类专栏： Godot4.x 几何与绘图 文章标签： godot gdscript CanvasItem draw 绘图函数 几何
于 2024-04-13 19:33:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/graypigen1990/article/details/137723288
版权
本文详细介绍了Godot中的CanvasItem如何通过各种函数绘制圆形、实心圆、空心圆、圆弧、扇形、线段、多边形以及椭圆，包括绘制技巧和方法。
摘要由CSDN通过智能技术生成

概述

本节通过实例来简单讲解CanvasItem绘图函数中用于图形绘制的一些函数。
其他内容可以查看系列相关文章。

系列目录

绘制圆

绘制实心圆

圆是一种非常简单的几何图形，可以通过圆形和半径来定义一个圆。

  • 使用draw_circle()方法可以绘制指定填充颜色的实心圆。
extends Node2D

# 绘制虚函数
func _draw() -> void:
	# 以(200,200)为圆心，绘制一个半径为100的橘黄色圆
	draw_circle(Vector2(200,200),100,Color.ORANGE)

绘制效果如下：
image.png

绘制空心圆

  • CanvasItem并没有直接提供绘制空心圆的函数，相反我们可以用圆弧绘制函数draw_arc()来绘制一个360度闭合的圆弧来间接绘制空心圆
extends Node2D

# 绘制虚函数
func _draw() -> void:
	# 以(200,200)为圆心，绘制一个半径为100的橘黄色圆圈
	draw_arc(Vector2(200,200),100,0,TAU,100,Color.ORANGE,2,true)

绘制效果如下：
image.png

绘制带边线的圆

  • 通过结合实心圆和空心圆的绘制，可以实现带有边线的实心圆效果
  • 也就是说可以绘制指定了边线颜色和填充颜色的圆。
extends Node2D

# 绘制虚函数
func _draw() -> void:
	# 实心圆
	draw_circle(Vector2(200,200),100,Color.ORANGE)
	# 圆圈
	draw_arc(Vector2(200,200),100,0,TAU,100,Color.ORANGE_RED,2,true)

可以看到：

  • 我们使用了draw_circle()和draw_arc()函数，分别绘制了相同圆心和半径的实心圆和空心圆，并利用了绘图的先后顺序和特性：先绘制的图形会被后绘制的遮盖
  • 先绘制实心圆，后绘制空心圆，则空心圆覆盖在空心圆之上

绘制效果如下：
image.png

绘制圆弧和扇形

上面绘制空心圆时我们已经提到了圆弧绘制函数draw_arc()。

  • 圆弧是圆的一部分，所以依然需要指定一个圆心和半径
  • 通过设定起始角度和终止角度，可以限定绘制圆上的那一部分
extends Node2D

# 绘制虚函数
func _draw() -> void:
	# 绘制圆弧
	draw_arc(Vector2(200,200),100,0,PI/2.0,100,Color.ORANGE_RED,2,true)

上面代码的含义就是：

  • 以(200,200)为圆心，以100像素为半径
  • 起始角度为0，结束角度为PI/2.0，也就是90°
  • 边线宽度为2，颜色为Color.ORANGE_RED（橘红色）
  • 抗锯齿为true，绘制一条弧线

绘制效果如下：
image.png

绘制空心扇形

通过将弧线起止点与圆心相连，可以获得空心的扇形。
我们可以使用draw_line()绘制圆心到弧线起始点和终止点的连线。

extends Node2D

var start_angle:= 0.0    # 起始角度
var end_angle:= PI/2.0   # 终止角度
var c:= Vector2(200,200) # 圆心
var r:= 100.0            # 半径
var border_color := Color.ORANGE_RED    # 边线颜色
var border_width := 2.0                 # 边线颜色
var antialiased := true                 # 抗锯齿
var point_count := 100                  # 绘制的点数目


# 绘制虚函数
func _draw() -> void:
	# 绘制圆弧
	draw_arc(c,r,start_angle,end_angle,point_count,border_color,border_width,antialiased)
	
	# 求圆弧起始和终止点的坐标
	var p1 = c + Vector2.RIGHT.rotated(start_angle) * r
	var p2 = c + Vector2.RIGHT.rotated(end_angle) * r
	
	# 绘制圆心到圆弧起始和终止点的连线
	draw_line(c,p1,border_color,border_width,antialiased)
	draw_line(c,p2,border_color,border_width,antialiased)

绘制效果：
image.png

绘制线段

绘制实线和虚线

  • draw_line()用于绘制两点之间的线段
  • draw_dashed_line()则用于绘制两点之间的虚线
extends Node2D

var p1:= Vector2(200,200)    # 起点
var p2:= Vector2(300,200)    # 终点
var border_color := Color.WHITE         # 边线颜色
var border_width := 2.0                 # 边线宽度
var antialiased := true                 # 抗锯齿

# 绘制虚函数
func _draw() -> void:
	# 绘制线段
	draw_line(p1,p2,border_color,border_width,antialiased)
	# 间距
	var d := Vector2(0,100)
	# 绘制虚线线段
	draw_dashed_line(p1 + d,p2 + d,border_color,border_width)

绘制效果：
image.png

  • draw_line()和draw_dashed_line()都要指定两个点作为线段的起点和终点
  • 都需要设定边线的绘制宽度border_width和绘制颜色border_color

绘制不同长短和间距的虚线

通过设定draw_dashed_line()的dash参数（默认2.0），可以创建不同长度和间距的虚线。

extends Node2D

var p1:= Vector2(200,200)    # 起点
var p2:= Vector2(300,200)    # 终点
var border_color := Color.WHITE         # 边线颜色
var border_width := 1.0                 # 边线宽度
var antialiased := true                 # 抗锯齿

# 绘制虚函数
func _draw() -> void:
	# 间距
	var d := Vector2(0,20)
	for i in range(20):
		# 绘制虚线线段
		draw_dashed_line(p1 + d * i,p2 + d * i,border_color,border_width,i)

不同长度和间距的虚线效果：
image.png
不使用对齐：

  • 通过将aligned参数设为false，可以绘制出与线段终点不对齐的虚线
extends Node2D

var p1:= Vector2(200,200)    # 起点
var p2:= Vector2(300,200)    # 终点
var border_color := Color.WHITE         # 边线颜色
var border_width := 1.0                 # 边线宽度
var antialiased := true                 # 抗锯齿

# 绘制虚函数
func _draw() -> void:
	# 间距
	var d := Vector2(0,20)
	for i in range(20):
		# 绘制虚线线段
		draw_dashed_line(p1 + d * i,p2 + d * i,border_color,border_width,i,false)

绘制效果：
image.png

绘制多条线段

  • draw_multiline()可以用于同时绘制多条线段
  • 需要传入一个包含所有线段起始点和终点的PackedVector2Array，其中按顺序，每两个Vector2构成一条线段。
extends Node2D

var p1 = Vector2(20,20)
var p2 = p1 + Vector2.RIGHT * 100
var margin := 20.0   # 线段间的间隔距离

var lines:PackedVector2Array

func _ready() -> void:
	var h = Vector2.DOWN * margin
	
	for i in range(10):
		lines.append_array([p1 + h * i,p2+h * i])  # 添加线段
		
func _draw() -> void:
	draw_multiline(lines,Color.AQUA,1)       # 同时绘制多条线段

绘制效果：
image.png

绘制折线

折线（Polyline）是一种带有转折的连续线段。至少需要一个“拐弯”或由三个点定义。（经典巽式非严谨定义）

使用笨办法

  • 可以使用draw_line()进行首尾相连的绘制来得到折线
  • 也可以使用draw_multiline()构造多条线段来绘制折线
extends Node2D


var border_color := Color.WHITE         # 边线颜色
var border_width := 1.0                 # 边线宽度
var antialiased := true                 # 抗锯齿

# 绘制虚函数
func _draw() -> void:
	var p1:= Vector2(200,200)    # 点1
	var p2:= Vector2(300,200)    # 点2
	var p3:= Vector2(200,100)    # 点3
	# 绘制虚线线段
	draw_line(p1,p2,border_color,border_width)
	draw_line(p2,p3,border_color,border_width)

上面的代码：

  • 定义3个点p1、p2、p3
  • 然后使用draw_line()分别绘制线段(p1,p2)和(p2,p3)

绘制效果：
image.png

使用折线绘制函数

  • CanvasItem提供了更好的折线绘制函数draw_polyline()和draw_polyline_colors()。
  • 你只需要将折线的顶点按顺序存入一个PackedVector2Array并传入折线绘制函数，函数就会自动绘制出该折线
extends Node2D


var border_color := Color.WHITE         # 边线颜色
var border_width := 1.0                 # 边线宽度
var antialiased := false                # 抗锯齿

# 绘制虚函数
func _draw() -> void:
	# 折线的顶点
	var points:PackedVector2Array = [Vector2(200,200),Vector2(300,200), Vector2(200,100)]
	# 绘制虚线线段
	draw_polyline(points,border_color,border_width,antialiased)

绘制效果：
image.png

绘制渐变折线

  • draw_polyline()只能指定一种颜色。所以只能绘制带一种颜色的折线。
  • 而draw_polyline_colors()可以指定多个颜色对应于相应顺序的顶点，然后绘制时每两个顶点之间的线段会因为顶点颜色而插值，显示出颜色渐变的效果
  • draw_polyline(points,border_color,border_width,antialiased)与draw_polyline_colors(points,[border_color],border_width,antialiased)等价
extends Node2D

var colors:PackedColorArray = [Color.AQUA,Color.BROWN,Color.ORANGE]  # 顶点颜色集合
var border_width := 1.0                 # 边线宽度
var antialiased := false                # 抗锯齿


# 绘制虚函数
func _draw() -> void:
	# 折线的顶点
	var points:PackedVector2Array = [Vector2(200,200),Vector2(300,200), Vector2(200,100)]
	# 绘制渐变折线
	draw_polyline_colors(points,colors,border_width,antialiased)

image.png
这里，定义了三个颜色对应到折线的3个顶点，用draw_polyline_colors()绘制时，会在内部通过颜色插值来实现渐变。

绘制多边形

多边形(Polygon)是指由3个及以上顶点构成的封闭图形。(依旧是巽式非严谨定义)

  • draw_colored_polygon()可用于绘制填充某种颜色的实心多边形
  • 至少需要指定平面上3个点才能构成多边形。
extends Node2D

# 绘制虚函数
func _draw() -> void:
	# 折线的顶点
	var points:PackedVector2Array = [Vector2(200,200),Vector2(300,200), Vector2(200,100)]
	# 绘制渐变多边形
	draw_colored_polygon(points,Color.AQUA)

上面的代码：

  • 定义了包含三个点的数组points
  • 然后直接传递给draw_colored_polygon()函数，然后指定使用Color.AQUA（海水色）来填充整个多边形

绘制效果如下：
image.png

绘制渐变填充多边形

  • 和draw_polyline_colors()一样，多边形也有指定顶点颜色的渐变版本draw_polygon()
  • 通过按顺序指定每个顶点的颜色，可以实现整个多边形的颜色插值，从而实现渐变多边形
extends Node2D

var colors:PackedColorArray = [Color.AQUA,Color.BROWN,Color.ORANGE]  # 顶点颜色集合
var border_width := 1.0                 # 边线宽度
var antialiased := false                # 抗锯齿


# 绘制虚函数
func _draw() -> void:
	# 折线的顶点
	var points:PackedVector2Array = [Vector2(200,200),Vector2(300,200), Vector2(200,100)]
	# 绘制渐变多边形
	draw_polygon(points,colors)

上面的代码中：

  • 依旧是定义了三个顶点，存储与数组points
  • 然后还定义了一个颜色数组colors，来存储三个顶点的颜色
  • 最后调用draw_polygon()，并传入points和colors

绘制效果如下：
image.png

  • draw_polygon(points,[Color.BLUE])等价于draw_colored_polygon(points,Color.BLUE)，将只会以一种颜色填充

绘制四边形和矩形

通过指定4个点，可以定义四边形或矩形。

extends Node2D

var colors:PackedColorArray = [Color.AQUA,Color.BROWN,Color.ORANGE,Color.RED]  # 顶点颜色集合
var border_width := 1.0                 # 边线宽度
var antialiased := false                # 抗锯齿


# 绘制虚函数
func _draw() -> void:
	# 矩形的顶点
	var points:PackedVector2Array = [Vector2(200,200),Vector2(300,200), Vector2(300,300),Vector2(200,300)]
	# 绘制渐变多边形
	draw_polygon(points,colors)

image.png
同样你可以使用draw_colored_polygon()绘制单色填充版本。

通过向量旋转获取正多边形

正多边形可以看做在圆上的等分点按顺序相连构成的图形。

具体可以参考我之前的文章：

这里以正多边形顶点求取为例，编写如下函数：

# 正多边形点求取函数
func regular_polygon(center:Vector2,r:float,edges:=3,strat_angle:float=0,close:=false):
	var points:PackedVector2Array = []
	var right = Vector2.RIGHT
	# 利用角度插值和向量旋转获取正多边形顶点
	for i in range(edges):
		var deg = lerp(0,360,float(i)/float(edges))
		var p = right.rotated(deg_to_rad(deg)) * r
		points.append(p)
	
	if close: # 闭合 - 用于draw_polyline
		points.append(points[0])
	# 变换
	var T:= Transform2D().rotated(strat_angle).translated(center)
	return T * points

绘制测试：

extends Node2D

# 顶点颜色集合
var colors:PackedColorArray = [Color.AQUA,Color.BROWN,Color.ORANGE,Color.RED]
var border_width := 1.0                 # 边线宽度
var antialiased := false                # 抗锯齿


func _draw() -> void:
	var regular = regular_polygon(Vector2(200,200),100,3,0,true)
	# 绘制空心正多边形
	draw_polyline(regular,colors[0])

上面代码：

  • 调用自定义多边形顶点求取函数regular_polygon()
  • 以(200,200)为圆心，以100像素为半径，起始角度为0（与X轴正方向夹角为0），求正三角形

绘制效果：
image.png
通过修改edges参数，可以绘制不同边数的正多边形：
edges = 6

使用正多边形函数绘制圆

通过绘制有很多边的正多边形，可以绘制出近似的圆。

func _draw() -> void:
	var regular = regular_polygon(Vector2(200,200),100, 2 * 100 * PI,0,true)
	# 绘制空心圆
	draw_polyline(regular,colors[0])

上面的代码：

  • 绘制半径r为200，边数为2 * r * PI的正多边形

其绘制效果完全可以看做是一个圆：
image.png

绘制椭圆

椭圆也是很常见的几何图形，但是通过数学公式和原始定义去求椭圆是比较愚蠢的做法。
实际上椭圆可以看做是圆拉伸后的图形，这种理解在几何和数学上也是被承认的。
所以我们实际上只需要构造一个拉伸的线性变换，并将其施加到绘制的圆上就可以了。
基于上面的思想，编写椭圆求取函数如下：

# 椭圆求取函数
func ellipse(center:Vector2,r1:float,r2:float,rot:=0.0,close:=false):
	# 先求取半径为r1的圆
	var circle = regular_polygon(Vector2(),r1, r1 * 2 * PI,0,close)
	# 构造变换
	var t := Transform2D().scaled(Vector2(1,r2/r1)).rotated(rot).translated(center)
	return t * circle

测试代码：

extends Node2D

var c = Vector2(500,300)  # 圆心
var r1 = 200  # 水平半径
var r2 = 150  # 垂直半径
var rot = deg_to_rad(0)  # 旋转角度
var border_width := 1.0  # 边线宽度


func _draw() -> void:
	# 求椭圆
	var ell = ellipse(c,r1,r2,rot,true)
	# 绘制原始的圆
	draw_circle(c,r1,Color.DARK_GRAY)
	# 绘制原始圆心
	draw_circle(c,2,Color.AQUA)
	# 绘制椭圆
	draw_polyline(ell,Color.AQUA,border_width)

绘制效果：
rot = deg_to_rad(0)“)rot = deg_to_rad(45)”)

  • 此处，为了验证缩放变换和旋转变换的正确性，所以在绘制椭圆之前绘制了以横向半径r1为半径的圆。

完整代码

因为椭圆求取函数ellipse是基于正多边形求取函数regular_polygon的，所以完整代码如下：

extends Node2D

var c = Vector2(500,300)  # 圆心
var r1 = 200  # 水平半径
var r2 = 150  # 垂直半径
var rot = deg_to_rad(0)  # 旋转角度
var border_width := 1.0  # 边线宽度


func _draw() -> void:
	# 求椭圆
	var ell = ellipse(c,r1,r2,rot,true)
	# 绘制原始的圆
	draw_circle(c,r1,Color.DARK_GRAY)
	# 绘制原始圆心
	draw_circle(c,2,Color.AQUA)
	# 绘制椭圆
	draw_polyline(ell,Color.AQUA,border_width)

# 椭圆求取函数
func ellipse(center:Vector2,r1:float,r2:float,rot:=0.0,close:=false):
	# 先求取半径为r1的圆
	var circle = regular_polygon(Vector2(),r1, r1 * 2 * PI,0,close)
	# 构造变换
	var t := Transform2D().scaled(Vector2(1,r2/r1)).rotated(rot).translated(center)
	return t * circle
	
	
	# 正多边形点求取函数
func regular_polygon(center:Vector2,r:float,edges:=3,strat_angle:float=0,close:=false):
	var points:PackedVector2Array = []
	var right = Vector2.RIGHT
	# 利用角度插值和向量旋转获取正多边形顶点
	for i in range(edges):
		var deg = lerp(0,360,float(i)/float(edges))
		var p = right.rotated(deg_to_rad(deg)) * r
		points.append(p)
	
	if close: # 闭合 - 用于draw_polyline
		points.append(points[0])
	# 变换
	var T:= Transform2D().rotated(strat_angle).translated(center)
	return T * points

总结

巽星石
关注
  • 31
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Godot CanvasItem
游戏开发
09-06 289
Godot CanvasItem 继承了: Node < Object 继承者: Control, Node2D Base class of anything 2D. 任何2D的基类。 描述 Base class of anything 2D. Canvas items are laid out in a tree; children inherit and extend their parent’s transform. CanvasItem is extended by Control for a
【Godot4.2】圆环绘制思路以及函数
巽的博客
04-20 490
在Godot中没有办法直接绘制圆环，利用Geometry2D的布尔运算也无法实现。所以只能另想办法。这个问题其实想了有一段时间了，昨天因为QQ群群友的提问，于是就直接试验了一下，结果就有了本文。对于在Godot中绘制圆环，我自己想到两种办法。这种思路的好处是，通过求一个小梯形，然后旋转变换，就可以绘制出圆环的形状。而且这种方式可以很方便的用颜色插值做出渐变色环效果。这种方法获得的圆环一体性强，可以直接作为单个多边形绘制，顶点数目也相较第一种方式少但缺点是可能没法获得方法1样的效果。
画布项目着色器(CanvasItem shaders)：Godot的2D着色器
开发游戏的老王
09-01 1317
译者注:直译为***画布元素着色器***下文中将意译成2D着色器 2D着色器(CanvasItem shaders) 2D着色器用于绘制Godot中的所有的2D元素，包括所有继承于CanvasItem的节点以及所有的GUI元素。 相对于3D着色器，2D着色器要简单一些，内置函数也比较少，但是2D和3D着色器的基础结构是相同的，都包顶点函数(vertex)，片元函数(fragment)及光(li...
Godot 4 源码分析 - 练手 - 和谐共生
drgraph的博客
06-24 744
今天看到一个微信视频，和谐共生，大概效果如下研究这么长时间的Godot，今天试试能否实现上述效果粗看一下，这个效果实现分几步：1. 画圆，并确定多个圆的位置规律2. 动点，并确定各动点的运动规律3. 综合调试。
【Godot4.2】CanvasItem绘图函数全解析 - 5.绘制字符和字符串
巽的博客
04-14 1073
到这一节为止，我们已经学习了如何在CanvasItem中绘制简单几何图形、图片以及样式盒。但是对于很重要的文字一直没有涉及。本节就来讲一下字符和字符串绘制函数，以及替换它们的两个类。本节简要讲述了CanvasItem内置的字符和字符串绘制函数及其缺点然后讲述了更好用的TextLine和，用于绘制单行和多行文本。实际上TextLine和好有很多特性和功能，可以让我们轻松实现很多东西。但是篇幅所限，留到下节。对于文本绘制的综合使用，也会专门留几个案例，也是相当有趣。
Godot-v4.2-beta1-win64.exe.zip
11-08
1. **全新渲染器**：Godot 4.2引入了新的物理渲染器（Vulkan-based renderer），它带来了更高效的图形处理和更高质量的图像输出。Vulkan API的使用提供了更低级别的硬件控制，提高了多线程性能。 2. **C#语言支持...
godot-docs-html-master.zip
最新发布
05-27
《Godot游戏引擎文档解析与应用》 Godot是一款开源的游戏开发引擎，以其强大的功能、易用性以及跨平台支持而受到开发者们的喜爱。"godot-docs-html-master.zip" 是Godot官方文档的HTML版本，它包含了丰富的教程、...
Godot-3-2D-Day-Night-Cycle-master.zip
09-02
Godot-3-2D-Day-Night-Cycle-master Godot-3-2D-Day-Night-Cycle-master Godot-3-2D-Day-Night-Cycle-master
Godot-v4.1.2-stable-export-templates.tpz
10-21
godot 4.1.2 版本 导出模板应用程序离线模板文件，由于下载速度缓慢，可以直接下载这个文件，然后选中本地安装。 合集下载地址： https://downloads.tuxfamily.org/godotengine/4.1.2/
SDL2-2.0.8.tar.gz
11-03
**标题解析：** "SDL2-2.0.8.tar.gz" 是一个压缩包文件，其中 "SDL2" 表示 Simple DirectMedia Layer 的第二版，这是一个跨平台的开发库，用于处理图形、音频和输入设备。版本号 "2.0.8" 指示这是该库的第 2.0.8 ...
canvas-绘制圆形
nicecode
07-27 5223
角度与弧度的js表达式:radians(弧度)=(deg*Math.PI/180)。 canvas绘制圆形 arc(x, y, radius, startAngle, endAngle, anticlockwise) ​ 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束， ​ 按照anticlockwise给定的方向（默认为顺时针）来生成。 ​ ture：逆时针 ​ false: 顺时针 ​ x,y为绘制圆弧所在圆上的圆心坐标
【Godot】Panel 制作一个圆形的星体
qq_37280924的博客
08-20 1002
Godot 3.2.2 添加节点 设置 Panel 属性，添加 StyleBoxFlat 设置取消勾选 Draw Center 属性，设置 Border Width 属性设置边框大小 设置 Corner Radius 设置圆角属性 设置 rect_size 大小为 100, 100 属性 设置 shadow 属性，设置他的阴影 完成 哈哈，很丑，但是你可以自己试着修改一下属性。多动手实践，更容易记住 ...
在godot的canvas_item着色器中构建逆投影矩阵和逆视图矩阵
weixin_44181969的博客
07-25 269
使用canvas_item着色器进行后期处理时构建空间相机的逆投影矩阵和逆视图矩阵
Godot游戏开发实践之二：AI之寻路新方式
SpkingR的博客
08-03 1883
一、前言 AI 一直是游戏开发中一个热门词汇，当然这不是人工智能的那个 AI ，而是指有着人类思想的 NPC 或者聪明的敌人等等。根据游戏的类型和复杂程度， AI 的实现可以很简单，也可以非常复杂。作为新手，本文不会讨论所谓高级 AI 的实现方式，那太不现实，不过我们可以先从最简单、最常用也是最实用的 AI 寻路探索开始入手，进而丰富我们的小游戏！ 本文目标是让我们这些新手游戏开发者们都：能用得起 AI 、能用好 AI 、能做 ai （别念出声！），嘿嘿！其实，游戏中的寻路方法非常之多，我所见到过的就有好.
Godot游戏引擎：GraphEdit和GraphNode教程（四）——应用
weixin_44222082的博客
03-30 801
Godot教程——GraphEdit和GraphNode 上文： Godot游戏引擎：GraphEdit和GraphNode教程（一）—— GraphNode Godot游戏引擎：GraphEdit和GraphNode教程（二）——GraphEdit Godot游戏引擎：GraphEdit和GraphNode教程（三）——GraphEdit事件处理 这一期开始进行应用。 在前三期，我们对God...
用canvas绘制一个圆形，实现绕着一个中心运动
马优晨
11-02 5544
实现效果 使用canvas绘制一个圆形，实现绕着一个中心，轨迹类似于走一个椭圆的轨迹那样路线，并且实现漂浮的效果。这里只是一个实例Demo，直接运行就可以，下面附上代码：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content
用HTML5canvas绘制一个圆环形的进度表示
RedStarOfSleep's Blog
08-02 343
文章搬至CSDN, 最新内容请访问: http://blog.csdn.net/redstarofsleep/article/details/45092115   先看一下画出来的效果,如下图,这样一个圆环形的进度. 我这里使用HTML5的Canvas来要制作这样一个圆环形的进度,   首先是HTML页面,HTML5的文档标识是: &lt;!DOCTYPE html&gt;  这个...
canvas 画圆
weixin_43845137的博客
03-19 520
目录@[TOC](目录)canvas 画圆一个简单的圆圆弧等圆 canvas 画圆 一个简单的圆 arc(x, y, radius, startAngle, endAngle, 顺时针还是逆时针) ture 逆时针 false顺时针 <template> <div> <canvas ref="canvasRef" width="420px" height="420px">您的浏览器版本过低，请升级浏览器或者使用谷歌浏览器</canvas>
``` env = SConscript("thirdLibrary/godot-cpp/godot-cpp-4.1.1/SConstruct") ```
01-25
1. `SConscript`是SCons构建工具中的一个函数，用于调用其他的SConscript脚本文件。在这里，它被用来调用路径为"thirdLibrary/godot-cpp/godot-cpp-4.1.1/SConstruct"的SConscript脚本文件。 2. `env`是一个变量，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

巽星石

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值