24
4
CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.
Bài viết trên blog CFSDN JS canvas này thực hiện các chức năng bảng vẽ và bảng chữ ký được tác giả sưu tầm và biên soạn. Nếu các bạn quan tâm đến bài viết này thì nhớ like nhé.
Ví dụ trong bài viết chia sẻ code cụ thể cho JS canvas để thực hiện chức năng bảng vẽ/bảng chữ ký để các bạn tham khảo.
Lời nói đầu.
Bảng đen điện tử thông dụng trong lớp học điện tử.
Đặc điểm của bài viết này:
Các mô-đun đóng gói JS gốc.
Mẫu mã tối thiểu.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<
html
chỉ
=
"vi"
>
<
cái đầu
>
<
siêu dữ liệu
bộ ký tự
=
"UTF-8"
>
<
siêu dữ liệu
http-tương đương
=
"Tương thích với X-UA"
nội dung
=
"IE=cạnh"
>
<
siêu dữ liệu
tên
=
"khung nhìn"
nội dung
=
"width=chiều rộng thiết bị, tỷ lệ ban đầu=1.0"
>
<
tiêu đề
>Tài liệu
tiêu đề
>
cái đầu
>
<
thân hình
>
<
canvas
nhận dạng
=
"vải bạt"
>
canvas
>
<
kịch bản
>
hãy để c = document.getElementById('canvas');
c. width = window. chiều rộng bên trong;
c.height = window.innerHeight;
hãy để ctx = c.getContext('2d');
// vẽ một bảng đen
ctx.fillStyle = "đen";
ctx.fillRect(0,0,600,300);
// nhấn dấu
hãy bật tắt = sai,
cũx = -10,
xong = -10;
//Đặt màu
để linecolor = "trắng";
//Đặt độ rộng dòng
cho linw = 4;
//Thêm sự kiện chuột
// nhấn
c.addEventListener('mousedown', sự kiện => {
onoff = true;
// Vị trí - 10 là sửa vị trí và đặt hình vẽ lên trên con trỏ chuột
oldx = sự kiện.pageX - 10;
sự kiện = sự kiện.pageY - 10;
},SAI);
// di chuyển
c.addEventListener('mousemove', sự kiện => {
nếu(onoff == đúng){
hãy để newx = event.pageX - 10,
newy = sự kiện.pageY - 10;
// vẽ
ctx. beginPath();
ctx.moveTo(oldx,oldy);
ctx.lineTo(newx,new);
ctx.strokeStyle = màu đường kẻ;
ctx.lineWidth = linw;
ctx.lineCap = "tròn";
ctx. stroke();
// Vị trí tọa độ phải được cập nhật mỗi khi nó di chuyển
oldx = newx,
cũ = mới;
}
}, ĐÚNG VẬY);
// nảy
c.addEventListener('chuột lên', ()=> {
bật tắt = sai;
},SAI);
kịch bản
>
thân hình
>
html
>
|
Hiển thị kết quả.
Giải thích mã.
ý tưởng.
1. Nhấn chuột để bắt đầu vẽ. Sự kiện nhấn chuột. 2. Nhấn chuột để kết thúc vẽ. Sự kiện di chuột lên. 3. Nhấn và di chuyển chuột và đường dẫn sẽ được vẽ. Sự kiện di chuyển chuột.
Giải thích mã.
Ý tưởng tổng thể: nhấn chuột, kích hoạt công tắc di chuyển, bắt đầu ghi đường sau khi di chuyển (sử dụng tọa độ sau khi di chuyển - tọa độ trước khi di chuyển, sau đó vẽ đường) và tọa độ cũ sẽ được cập nhật mỗi lần bạn di chuyển. Sau khi thả chuột, nhả công tắc chuyển động.
1. Chỉ khi nhấn chuột thì hiệu ứng di chuyển bản vẽ mới được kích hoạt nên cần phải thêm phán đoán trạng thái. 2. Do có độ lệch giữa con trỏ chuột và vị trí thực tế nên khi định vị tọa độ cần thêm pagex-10 sao cho tọa độ nằm ở đầu con trỏ. 3. Vị trí tọa độ phải được cập nhật mỗi khi nó di chuyển và các đoạn đường nhỏ được sử dụng để mô phỏng các đường không đều.
Mô-đun gói.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
"vải bạt"
>
lớp Hội đồng quản trị{
hàm tạo(canvasName =
'vải bạt'
, dữ liệu =
mới
Bản đồ([
[
"onoff"
,
SAI
],
[
"cũ"
, -10],
[
"cũ"
, -10],
[
"Kiểu điền"
,
"đen"
],
[
"Màu đường"
,
"trắng"
],
[
"chiều rộng dòng"
, 4],
[
"lineCap"
,
"tròn"
],
[
"chiều rộng vải"
, window.innerWidth],
[
"chiều cao vải"
, cửa sổ.innerHeight]
])){
// dữ liệu này = dữ liệu;
cái này
.c = document.getElementById(canvasName);
cái này
.ctx =
cái này
.c.getContext(
'2ngày'
);
cái này
.onoff = dữ liệu.get(
"onoff"
);
cái này
.oldx = dữ liệu.get(
"cũ"
);
cái này
.oldy = data.get(
"cũ"
);
cái này
.lineColor = dữ liệu.get(
"Màu đường"
);
cái này
.lineWidth = dữ liệu.get(
"chiều rộng dòng"
);
cái này
.lineCap = dữ liệu.get(
"lineCap"
);
cái này
.c.width = dữ liệu.get(
"chiều rộng vải"
);
cái này
.c.height = dữ liệu.get(
"chiều cao vải"
);
cái này
.ctx.fillStyle = dữ liệu.get(
"Kiểu điền"
);
cái này
.ctx.fillRect(0,0,600,300);
}
sự kiệnHoạt động(){
//Thêm sự kiện chuột
// nhấn
cái này
.c.addEventListener(
'di chuột xuống'
, sự kiện => {
cái này
.onoff =
ĐÚNG VẬY
;
// Vị trí - 10 là sửa vị trí và đặt hình vẽ lên trên con trỏ chuột
cái này
.oldx = sự kiện.pageX - 10;
cái này
.event = sự kiện.pageY - 10;
},
SAI
);
// di chuyển
cái này
.c.addEventListener(
'di chuyển chuột'
, sự kiện => {
nếu như
(
cái này
.onoff ==
ĐÚNG VẬY
){
hãy để newx = event.pageX - 10,
newy = sự kiện.pageY - 10;
// vẽ
cái này
.ctx.beginPath();
cái này
.ctx.di chuyển đến(
cái này
.cũx,
cái này
.đã từng là);
cái này
.ctx.lineTo(newx,new);
cái này
.ctx.strokeStyle =
cái này
.màu đường;
cái này
.ctx.lineWidth =
cái này
. chiều rộng dòng;
cái này
.ctx.lineCap =
cái này
.lineCap;
cái này
.ctx.stroke();
// Vị trí tọa độ phải được cập nhật mỗi khi nó di chuyển
cái này
.oldx = newx,
cái này
.oldy = mới;
}
},
ĐÚNG VẬY
);
// nảy
cái này
.c.addEventListener(
'chuột lên'
, ()=> {
cái này
.onoff =
SAI
;
},
SAI
);
}
}
để bảng =
mới
Bảng();
board. eventOperation();
|
Trên đây là toàn bộ nội dung bài viết này hi vọng nó sẽ giúp ích cho việc học của mọi người và cũng mong mọi người ủng hộ mình.
Liên kết gốc: https://blog.csdn.net/u013362192/article/details/113934773.
Cuối cùng, bài viết này về cách triển khai canvas JS của các chức năng bảng vẽ và bảng chữ ký sẽ kết thúc tại đây. Nếu bạn muốn biết thêm về cách triển khai canvas JS của các chức năng bảng vẽ và bảng chữ ký, vui lòng tìm kiếm các bài viết CFSDN hoặc tiếp tục duyệt qua phần liên quan. Tôi hy vọng tất cả các bạn ủng hộ blog của tôi trong tương lai! .
24
4
0
Tôi mới bắt đầu tự học python 3.2 (hoặc đang cố gắng tự dạy mình). Tôi nghĩ mình đã có tất cả những điều cơ bản nên tôi quyết định thử xây dựng thứ mà nhiều người nói với tôi là trò chơi dễ nhất, 0 và X. Tôi đang cố gắng vẽ một bảng có danh sách các danh sách và tôi muốn sử dụng biến N sẽ được chuyển đến
Tôi đang sử dụng các bản vẽ nghệ thuật đáp ứng - bản demo và Github Cách chính xác để đặt hình nền (thay vì nền trắng) cho bản vẽ nghệ thuật HTML5 Canvas đáp ứng đầy đủ là gì? Câu trả lời hay nhất.canvas{ nền-
Tôi đang viết một trò chơi bảng nhỏ cho Mac OS X bằng Cocoa. Bản vẽ lưới thực tế của tôi như sau: - (void)drawRect:(NSRect)reg { for (int x=0; x <
Trung tâm cá nhân
Điều phát hành
từ bỏ
Tôi là một lập trình viên xuất sắc, rất giỏi!