Lưu ý rằng vì chúng tôi đang hiển thị API Web Canvas, bạn có thể tìm thêm hướng dẫn và tài liệu theo liên kết này. https. // nhà phát triển. mozilla. org/en-US/docs/Web/API/Canvas_API
Có một số khác biệt về API mặc dù
Tiện ích Canvas đang hiển thị trực tiếp API CanvasRenderingContext2D
Tất cả API được viết bằng Snake_case thay vì camelCase, vì vậy, ví dụ:
import numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
6 trong JavaScript trở thànhimport numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
7 trong Python
Trước khi bắt đầu vẽ, chúng ta cần nói về canvas grid. Gốc của lưới này được định vị ở góc trên cùng bên trái tại tọa độ [0,0]. Tất cả các yếu tố được đặt liên quan đến nguồn gốc này. Vì vậy, vị trí của góc trên cùng bên trái của hình vuông màu xanh trở thành x pixel từ bên trái và y pixel từ trên cùng, tại tọa độ [x, y]
Vẽ hình chữ nhật
Có sáu phương pháp vẽ hình chữ nhật trên canvas
import numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
8Vẽ một hình chữ nhật đầy. Nếu
import numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
9 là Không, nó được đặt thành cùng giá trị vớifrom ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
0from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
1Vẽ đường viền hình chữ nhật. Nếu
import numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
9 là Không, nó được đặt thành cùng giá trị vớifrom ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
0from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
4Vẽ hình chữ nhật đầy. Trong đó
from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
5,from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
6,from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
0 vàimport numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
9 là số nguyên, danh sách số nguyên hoặc mảng NumPy. Nếuimport numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
9 là Không, nó được đặt thành cùng giá trị vớifrom ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
0from math import pi import numpy as np from ipycanvas import Canvas def polygon[canvas, x, y, radius, n_points]: angles = [2 * pi / n_points] * np.arange[n_points] v_x = x + np.cos[angles] * radius v_y = y + np.sin[angles] * radius points = np.stack[[v_x, v_y], axis=1] canvas.fill_polygon[points] background_color = "#89c64f" polygon_color = "#c6574f" canvas = Canvas[width=200, height=200] canvas.fill_style = background_color canvas.fill_rect[0, 0, canvas.width, canvas.height] canvas.fill_style = polygon_color polygon[canvas, 100, 100, 70, 6] canvas
1Vẽ các đường viền hình chữ nhật. Trong đó
from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
5,from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
6,from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
0 vàimport numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
9 là số nguyên, danh sách số nguyên hoặc mảng NumPy. Nếuimport numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
9 là Không, nó được đặt thành cùng giá trị vớifrom ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
0from math import pi import numpy as np from ipycanvas import Canvas def polygon[canvas, x, y, radius, n_points]: angles = [2 * pi / n_points] * np.arange[n_points] v_x = x + np.cos[angles] * radius v_y = y + np.sin[angles] * radius points = np.stack[[v_x, v_y], axis=1] canvas.fill_polygon[points] background_color = "#89c64f" polygon_color = "#c6574f" canvas = Canvas[width=200, height=200] canvas.fill_style = background_color canvas.fill_rect[0, 0, canvas.width, canvas.height] canvas.fill_style = polygon_color polygon[canvas, 100, 100, 70, 6] canvas
8Tương tự như
from math import pi import numpy as np from ipycanvas import Canvas def polygon[canvas, x, y, radius, n_points]: angles = [2 * pi / n_points] * np.arange[n_points] v_x = x + np.cos[angles] * radius v_y = y + np.sin[angles] * radius points = np.stack[[v_x, v_y], axis=1] canvas.fill_polygon[points] background_color = "#89c64f" polygon_color = "#c6574f" canvas = Canvas[width=200, height=200] canvas.fill_style = background_color canvas.fill_rect[0, 0, canvas.width, canvas.height] canvas.fill_style = polygon_color polygon[canvas, 100, 100, 70, 6] canvas
9 nhưng có thêmfrom math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
0from math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
1 ndarray vàfrom math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
2from math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
3 ndarrayfrom math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
4Tương tự như
from math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
5 nhưng có thêmfrom math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
0from math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
1 ndarray vàfrom math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
2from math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
3 ndarray
Bạn cũng có thể xóa một khu vực hình chữ nhật canvas nhất định
from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.stroke_style = "blue" canvas.stroke_line[0, 0, 150, 150] canvas.stroke_style = "red" canvas.stroke_line[200, 0, 0, 200] canvas.stroke_style = "green" canvas.stroke_line[150, 150, 0, 200] canvas
0Xóa vùng hình chữ nhật được chỉ định, làm cho nó hoàn toàn trong suốt. Nếu
import numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
9 là Không, nó được đặt thành cùng giá trị vớifrom ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
0
from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_rect[25, 25, 100, 100] canvas.clear_rect[45, 45, 60, 60] canvas.stroke_rect[50, 50, 50, 50] canvas
from math import pi import numpy as np from ipycanvas import Canvas def polygon[canvas, x, y, radius, n_points]: angles = [2 * pi / n_points] * np.arange[n_points] v_x = x + np.cos[angles] * radius v_y = y + np.sin[angles] * radius points = np.stack[[v_x, v_y], axis=1] canvas.fill_polygon[points] background_color = "#89c64f" polygon_color = "#c6574f" canvas = Canvas[width=200, height=200] canvas.fill_style = background_color canvas.fill_rect[0, 0, canvas.width, canvas.height] canvas.fill_style = polygon_color polygon[canvas, 100, 100, 70, 6] canvas9 và
from math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas5 là những cách cực nhanh để vẽ tới một triệu hình chữ nhật cùng một lúc
import numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
Vẽ đa giác
Bạn có thể vẽ đa giác bằng cách cung cấp danh sách các điểm, danh sách Python hoặc mảng NumPy. Đó là cách nhanh nhất để vẽ đa giác bằng ipycanvas
from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.stroke_style = "blue" canvas.stroke_line[0, 0, 150, 150] canvas.stroke_style = "red" canvas.stroke_line[200, 0, 0, 200] canvas.stroke_style = "green" canvas.stroke_line[150, 150, 0, 200] canvas
5Điền vào một đa giác từ danh sách các điểm
from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.stroke_style = "blue" canvas.stroke_line[0, 0, 150, 150] canvas.stroke_style = "red" canvas.stroke_line[200, 0, 0, 200] canvas.stroke_style = "green" canvas.stroke_line[150, 150, 0, 200] canvas
6from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.stroke_style = "blue" canvas.stroke_line[0, 0, 150, 150] canvas.stroke_style = "red" canvas.stroke_line[200, 0, 0, 200] canvas.stroke_style = "green" canvas.stroke_line[150, 150, 0, 200] canvas
7. Vẽ đường viền đa giác từ danh sách các điểmfrom ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.stroke_style = "blue" canvas.stroke_line[0, 0, 150, 150] canvas.stroke_style = "red" canvas.stroke_line[200, 0, 0, 200] canvas.stroke_style = "green" canvas.stroke_line[150, 150, 0, 200] canvas
6from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.stroke_style = "blue" canvas.stroke_line[0, 0, 150, 150] canvas.stroke_style = "red" canvas.stroke_line[200, 0, 0, 200] canvas.stroke_style = "green" canvas.stroke_line[150, 150, 0, 200] canvas
9Điền vào nhiều đa giác cùng một lúc
import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
0Nét nhiều đa giác cùng một lúc. Xem để biết chi tiết
import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
1Tô nhiều đa giác cùng một lúc trong đó mỗi đa giác có thể có màu riêng. Xem để biết chi tiết
import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
2Nét vẽ nhiều đa giác cùng một lúc trong đó mỗi đa giác có thể có màu riêng. Xem để biết chi tiết
from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
from math import pi import numpy as np from ipycanvas import Canvas def polygon[canvas, x, y, radius, n_points]: angles = [2 * pi / n_points] * np.arange[n_points] v_x = x + np.cos[angles] * radius v_y = y + np.sin[angles] * radius points = np.stack[[v_x, v_y], axis=1] canvas.fill_polygon[points] background_color = "#89c64f" polygon_color = "#c6574f" canvas = Canvas[width=200, height=200] canvas.fill_style = background_color canvas.fill_rect[0, 0, canvas.width, canvas.height] canvas.fill_style = polygon_color polygon[canvas, 100, 100, 70, 6] canvas
Vẽ cung tròn và đường tròn
Có các phương pháp vẽ cung/vòng tròn trên khung vẽ
import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
3Vẽ một cung tròn có tâm là
import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
4 với bán kính làimport numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
5import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
6Vẽ một đường viền cung có tâm là
import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
4 với bán kính làimport numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
5import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
9Vẽ các cung tròn có tâm là
import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
4 với bán kính làimport numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
5. Trong đófrom ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
5,from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
6,import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
5 và các đối số khác là mảng NumPy, danh sách hoặc giá trị vô hướngfrom ipycanvas import Canvas canvas = Canvas[width=300, height=300] canvas.global_alpha = 0.01 size = [i for i in range[300]] position = [300 - i for i in range[300]] canvas.fill_rects[position, position, size] canvas
5Vẽ một đường viền cung có tâm là
import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
4 với bán kính làimport numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
5. Trong đófrom ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
5,from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
6,import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
5 và các đối số khác là mảng NumPy, danh sách hoặc giá trị vô hướngfrom ipycanvas import Canvas canvas = Canvas[width=300, height=300] canvas.global_alpha = 0.01 for i in range[300]: size = i position = 300 - i canvas.fill_rect[position, position, size] canvas
1Tương tự như
from ipycanvas import Canvas canvas = Canvas[width=300, height=300] canvas.global_alpha = 0.01 for i in range[300]: size = i position = 300 - i canvas.fill_rect[position, position, size] canvas
2 nhưng có thêmfrom math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
0from math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
1 ndarray vàfrom math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
2from math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
3 ndarrayfrom ipycanvas import Canvas canvas = Canvas[width=300, height=300] canvas.global_alpha = 0.01 for i in range[300]: size = i position = 300 - i canvas.fill_rect[position, position, size] canvas
7Tương tự như
from ipycanvas import Canvas canvas = Canvas[width=300, height=300] canvas.global_alpha = 0.01 for i in range[300]: size = i position = 300 - i canvas.fill_rect[position, position, size] canvas
8 nhưng có thêmfrom math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
0from math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
1 ndarray vàfrom math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
2from math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
3 ndarrayimport numpy as np from ipycanvas import Canvas, hold_canvas canvas = Canvas[width=400, height=300] n_rects = 300 x = np.random.randint[0, canvas.width, size=[n_rects]] y = np.random.randint[0, canvas.width, size=[n_rects]] width = np.random.randint[10, 40, size=[n_rects]] height = np.random.randint[10, 40, size=[n_rects]] colors_fill = np.random.randint[0, 255, size=[n_rects, 3]] colors_outline = np.random.randint[0, 255, size=[n_rects, 3]] alphas = np.random.random[n_rects] with hold_canvas[]: canvas.fill_styled_rects[x, y, width, height, color=colors_fill, alpha=alphas] canvas.line_width = 2 canvas.stroke_styled_rects[x, y, width, height, color=colors_outline, alpha=alphas] canvas
3Vẽ một hình tròn có tâm là
import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
4 với bán kính làimport numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
5import numpy as np from ipycanvas import Canvas, hold_canvas canvas = Canvas[width=400, height=300] n_rects = 300 x = np.random.randint[0, canvas.width, size=[n_rects]] y = np.random.randint[0, canvas.width, size=[n_rects]] width = np.random.randint[10, 40, size=[n_rects]] height = np.random.randint[10, 40, size=[n_rects]] colors_fill = np.random.randint[0, 255, size=[n_rects, 3]] colors_outline = np.random.randint[0, 255, size=[n_rects, 3]] alphas = np.random.random[n_rects] with hold_canvas[]: canvas.fill_styled_rects[x, y, width, height, color=colors_fill, alpha=alphas] canvas.line_width = 2 canvas.stroke_styled_rects[x, y, width, height, color=colors_outline, alpha=alphas] canvas
6Vẽ một đường viền hình tròn có tâm là
import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
4 với bán kính làimport numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
5import numpy as np from ipycanvas import Canvas, hold_canvas canvas = Canvas[width=400, height=300] n_rects = 300 x = np.random.randint[0, canvas.width, size=[n_rects]] y = np.random.randint[0, canvas.width, size=[n_rects]] width = np.random.randint[10, 40, size=[n_rects]] height = np.random.randint[10, 40, size=[n_rects]] colors_fill = np.random.randint[0, 255, size=[n_rects, 3]] colors_outline = np.random.randint[0, 255, size=[n_rects, 3]] alphas = np.random.random[n_rects] with hold_canvas[]: canvas.fill_styled_rects[x, y, width, height, color=colors_fill, alpha=alphas] canvas.line_width = 2 canvas.stroke_styled_rects[x, y, width, height, color=colors_outline, alpha=alphas] canvas
9Vẽ các vòng tròn có tâm là
import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
4 với bán kính làimport numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
5. Trong đófrom ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
5,from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
6,import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
5 là các mảng, danh sách hoặc giá trị vô hướng NumPyimport numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
05Vẽ một đường viền hình tròn có tâm là
import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
4 với bán kính làimport numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
5. Trong đófrom ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
5,from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "#63934e" canvas.stroke_style = "#4e6393" canvas.line_width = 5 canvas.fill_polygon[[[20, 20], [180, 20], [100, 150]]] canvas.stroke_polygon[[[20, 20], [180, 20], [100, 150]]] canvas
6,import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
5 là các mảng, danh sách hoặc giá trị vô hướng NumPyimport numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
11Giống như
import numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
12 nhưng có thêmfrom math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
0from math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
1 ndarray vàfrom math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
2from math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
3 ndarrayimport numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
17Tương tự như
import numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
18 nhưng có thêmfrom math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
0from math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
1 ndarray vàfrom math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
2from math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
3 ndarray
from math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas
vẽ đường
Có hai lệnh để vẽ một đường thẳng từ điểm này đến điểm khác
import numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
23Vẽ một đường thẳng từ
import numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
24 đếnimport numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
25import numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
26Vẽ một đường gồm các đường liên tiếp từ danh sách các điểm
from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.stroke_style = "blue" canvas.stroke_line[0, 0, 150, 150] canvas.stroke_style = "red" canvas.stroke_line[200, 0, 0, 200] canvas.stroke_style = "green" canvas.stroke_line[150, 150, 0, 200] canvas
6import numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
28Vẽ nhiều đoạn thẳng bị ngắt kết nối cùng một lúc. Xem để biết chi tiết
import numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas
29Vẽ nhiều đoạn thẳng bị ngắt kết nối cùng một lúc. Xem để biết chi tiết
from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.stroke_style = "blue" canvas.stroke_line[0, 0, 150, 150] canvas.stroke_style = "red" canvas.stroke_line[200, 0, 0, 200] canvas.stroke_style = "green" canvas.stroke_line[150, 150, 0, 200] canvas
import numpy as np from ipycanvas import Canvas canvas = Canvas[width=200, height=200] n = 50 x = np.linspace[0, 200, n] y = np.random.randint[200, size=n] points = np.stack[[x, y], axis=1] canvas.stroke_lines[points] canvas
phương pháp véc tơ
Hầu hết các phương pháp như
import numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas30/_______0_______31 và
import numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas32/
import numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas33 đều có các đối tác vector hóa.
from math import pi import numpy as np from ipycanvas import Canvas def polygon[canvas, x, y, radius, n_points]: angles = [2 * pi / n_points] * np.arange[n_points] v_x = x + np.cos[angles] * radius v_y = y + np.sin[angles] * radius points = np.stack[[v_x, v_y], axis=1] canvas.fill_polygon[points] background_color = "#89c64f" polygon_color = "#c6574f" canvas = Canvas[width=200, height=200] canvas.fill_style = background_color canvas.fill_rect[0, 0, canvas.width, canvas.height] canvas.fill_style = polygon_color polygon[canvas, 100, 100, 70, 6] canvas9/
from math import pi from ipycanvas import Canvas canvas = Canvas[width=200, height=200] canvas.fill_style = "red" canvas.stroke_style = "blue" canvas.fill_arc[60, 60, 50, 0, pi] canvas.stroke_circle[60, 60, 40] canvas5 và
import numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas12/
import numpy as np from ipycanvas import Canvas n_particles = 100_000 x = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] y = np.array[np.random.rayleigh[250, n_particles], dtype=np.int32] size = np.random.randint[1, 3, n_particles] canvas = Canvas[width=800, height=500] canvas.fill_style = "green" canvas.fill_rects[x, y, size] canvas18. Điều cần thiết là sử dụng các phương pháp đó khi bạn muốn vẽ cùng một hình nhiều lần với cùng một kiểu