Tìm hiểu cách sửa đổi các thuộc tính của đường như chiều rộng, màu, kiểu, nối và hơn thế nữa

Bạn đang xem: javascript canvas line color

Tìm hiểu cách sửa đổi thuộc tính đường chẳng hạn như chiều rộng, màu sắc, kiểu, nối và hơn thế nữa

Phần tử canvas (mới đối với HTML5) được sử dụng để vẽ đồ họa 2D thành một

Tài liệu HTML. Sử dụng Javascript, bạn có thể vẽ nhiều đối tượng

vào một canvas HTML, chẳng hạn như đường kẻ, văn bản, hình ảnh và hình dạng bằng cách sử dụng một số

Các hàm tích hợp sẵn

Khi sử dụng canvas để vẽ các đường thẳng, có một số thuộc tính mà bạn có thể sửa đổi thành kiểu dòng của bạn. Đối với các đường vẽ, bạn có tùy chọn để thay đổi độ rộng, màu sắc, độ dốc, kiểu nối dòng và các chữ viết hoa của dòng.

Đối với hướng dẫn này, bạn sẽ cần phải có hiểu cơ bản về

phần tử canvas HTML5 và cách vẽ đường bằng đường dẫn

.


Thay đổi độ rộng của dòng

Để thay đổi độ rộng của một dòng, bạn có thể sử dụng

thuộc tính lineWidth

của một đối tượng ngữ cảnh. Thuộc tính này nhận một số nguyên làm giá trị và theo mặc định được đặt thành 1.

Ví dụ, chúng ta hãy sử dụng thuộc tính lineWidth để tạo 3 dòng với độ rộng khác nhau. sử dụng các đường dẫn riêng biệt.

 

var

canvas

=

document.getElementById (" testCanvas ");

var

context

=

canvas.getContext (" 2d ");

context.beginPath ();

//

sử dụng

default

line

width

context.moveTo (

5

,

5

);

context.lineTo (

100

,

5

);

context.stroke ();

context.beginPath ();

//

sử dụng

line

width

=

2

context.lineWidth

=

2

;

context.moveTo (

5

,

25

);

context.lineTo (

100

,

25

);

context.stroke ();

context.beginPath ();

//

sử dụng

line

width

=

4

context.lineWidth

=

4

;

context.moveTo (

5

,

45

);

context.lineTo (

100

,

45

);

context.stroke ();

Điều này sẽ dẫn đến các đường được vẽ trên canvas của bạn như vậy:

Thay đổi màu đường

Để thay đổi màu đường, bạn có thể sử dụng

strokeStyle

thuộc tính của một đối tượng ngữ cảnh. Để sử dụng thuộc tính này để thay đổi màu dòng, chỉ cần cung cấp một chuỗi chứa

màu HTML hợp lệ

làm giá trị. < / p>

Ví dụ, chúng ta hãy tạo 3 đường, mỗi đường sử dụng một đường dẫn riêng biệt mà chúng ta sẽ vẽ bằng các màu khác nhau.

 

var

canvas =

document

.getElementById (

"testCanvas"

);

var

context = canvas.getContext (

"2d"

); context.beginPath (); context.strokeStyle =

"red"

; context.moveTo (

5

,

5

); context.lineTo (

100

,

5

); context.stroke (); context.beginPath (); context.strokeStyle =

"xanh"

; context.moveTo (

5

,

25

); context.lineTo (

100

,

25

); context.stroke (); context.beginPath (); context.strokeStyle =

"blue"

; context.moveTo (

5

,

45

); context.lineTo (

100

,

45

); context.stroke ();

Điều này sẽ dẫn đến các đường được vẽ trên canvas của bạn như vậy:

Thêm gradient tuyến tính màu đường

Để thêm gradient màu tuyến tính vào đường kẻ của bạn, trước tiên bạn sẽ cần tạo một đối tượng gradient tuyến tính bằng cách sử dụng phương thức createLinearGradient (). Phương thức này sử dụng 4 đối số, tọa độ X bắt đầu của gradient, tọa độ Y bắt đầu, tọa độ X kết thúc và tọa độ Y kết thúc.

Xem Thêm  SQL Server CHỌN DISTINCT - sql chỉ chọn các hàng riêng biệt

 

var

gradient = context.createLinearGradient (startX, startY, endX, endY);

Khi bạn đã tạo một đối tượng gradient và đã chỉ định tọa độ, bạn có thể bắt đầu thêm các điểm dừng màu bằng cách sử dụng phương thức addColorStop () có 2 đối số: một thực số từ 0 đến 1 chỉ định vị trí trên chiều dài của gradient để đặt điểm dừng màu (0 ở đầu và 1 ở cuối tọa độ được chỉ định cho gradient tuyến tính) và một

< span target = "_ blank"> màu HTML hợp lệ

.

 gradient.addColorStop (vị tríX, màu sắc);

Khi bạn đã thêm tất cả các điểm dừng màu cần thiết, bạn có thể đặt đối tượng gradient làm giá trị cho

strokeStyle

thuộc tính.

 

context.strokeStyle = gradient

Ví dụ, chúng ta hãy tạo một đường có chuyển màu 3 màu, bắt đầu từ màu đỏ, với màu xanh lá cây ở giữa và màu xanh lam ở cuối.

 

var

canvas =

document < /p>.getElementById(

"testCanvas"

);

var

context = canvas.getContext (

"2d"

); context.beginPath ();

var

gradient = context.createLinearGradient (

5

,

5 ,

100

,

100

); gradient.addColorStop (

0

,

"red"

); gradient.addColorStop (

0.5

,

"xanh"

); gradient.addColorStop (

1

,

"blue"

); context.strokeStyle = gradient; context.lineWidth =

4

; context.moveTo (

5

,

5

); context.lineTo (

100

,

100

); context.stroke ();

Điều này sẽ dẫn đến một dòng giống như sau:

Thay đổi cách mỗi đường nối thành một đường khác

Theo mặc định, cách các đường nối khi vẽ một đường là sắc nét và có thể trông khá thô và lởm chởm. Phần nối dòng này được gọi là phần bổ sung.

Để làm rõ ràng và chuyên nghiệp hơn nhìn, bạn có thể muốn xem xét việc thay đổi kiểu nối dòng được sử dụng trong đường dẫn của bạn. Điều này có thể được thực hiện bằng cách sử dụng thuộc tính

lineJoin

của đối tượng ngữ cảnh. Bạn có 3 lựa chọn:

miter

: (mặc định) một cạnh sắc nét

góc xiên

: một góc vát

vòng

: một góc tròn

Ví dụ: hãy tạo 3 đường dẫn thể hiện sự khác biệt trong 3 phép nối dòng này:

 

var

canvas

=

document.getElementById ("testCanvas");

var

context

=

canvas.getContext (" 2d ");

//

set

line

width

cho

khả năng hiển thị

context.lineWidth

=

4

;

//

default

line

tham gia

"miter"

context.beginPath ();

context.moveTo (

0

,

5

);

context.lineTo (

50

,

100

);

context.lineTo (

100

,

5

);

context.stroke ();

//

vát cạnh

dòng

tham gia

context.beginPath ();

context.lineJoin

=

"bevel";

context.moveTo (

110

,

5

);

context.lineTo (

160

,

100

);

context.lineTo (

210

,

5

);

context.stroke ();

//

làm tròn

dòng

tham gia

context.beginPath ();

context.lineJoin

=

"round";

context.moveTo (

220

,

5

);

context.lineTo (

270

,

100

);

context.lineTo (

320

,

5

);

context.stroke ();

Điều này sẽ tạo ra 3 đường dẫn giống như sau:

Lưu ý cạnh sắc trên cạnh thứ nhất, cạnh vát của cạnh thứ hai và cạnh tròn của thứ ba.

Thay đổi loại nắp cuối được sử dụng cho một dòng

Theo mặc định, mỗi dòng có một cạnh hình vuông đơn giản ở cuối.

Để thay đổi phong cách của end-cap, bạn có thể sử dụng

lineCap

thuộc tính của đối tượng ngữ cảnh. Thuộc tính này có thể nhận 3 giá trị khác nhau:

mông

: (mặc định) không có nắp cuối được thêm vào, cạnh phẳng đơn giản ở cuối dòng

vòng

: một đầu tròn được thêm vào cuối dòng

hình vuông

: dấu đầu hình vuông được thêm vào cuối dòng

Lưu ý

: Các giá trị tròn và vuông thêm một chút độ dài vào cuối mỗi dòng.

Ví dụ: hãy tạo 3 dòng mỗi dòng với các chữ hoa cuối khác nhau:

 

var

canvas

=

document.getElementById ("testCanvas");

var

context

=

canvas.getContext (" 2d ");

//

set

line

width

cho

khả năng hiển thị

context.lineWidth

=

4

;

//

default

end

cap

"mông"

context.beginPath ();

context.moveTo (

5

,

5

);

context.lineTo (

100

,

5

);

context.stroke ();

//

square

line

cap

context.beginPath ();

context.lineCap

=

"hình vuông";

context.moveTo (

5

,

25

);

context.lineTo (

100

,

25

);

context.stroke ();

//

round

line

cap

context.beginPath ();

context.lineCap

=

"round";

context.moveTo (

5

,

45

);

context.lineTo (

100

,

45

);

context.stroke ();

Điều này sẽ dẫn đến các dòng giống như sau:

Bạn sẽ cần xem xét cẩn thận từng điểm cuối của các dòng để nhận thấy sự khác biệt.


Xem thêm những thông tin liên quan đến chủ đề màu dòng canvas javascript

HTML5 Canvas Tutorial for Beginners [How to Draw Shapes with JavaScript]

  • Tác giả: Franks laboratory
  • Ngày đăng: 2020-08-14
  • Đánh giá: 4 ⭐ ( 2072 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Let’s learn how to draw shapes with JavaScript and create fabulous Fibonacci flowers all from scratch with just plain vanilla JavaScript. In this HTML5 Canvas Tutorial for Beginners we will take a look under the hood to see how canvas 2D API draws shapes and then we use that knowledge to create colorful flowers and seashells using so called ‘Fibonnacci flower formula’, also known as ‘Phyllotaxis’ and ‘Golden ratio’. This video will be very beginner friendly, you will be surprised how much you can do with so little JavaScript.

    LIKE the video please if you’re getting value out of my tutorials and SUBSCRIBE if you want to learn more vanilla JavaScript!

    Some of my favourite UDEMY courses:
    JavaScript Beginner Bootcamp (2020) https://bit.ly/3aqFFhc
    20 Web Projects With Vanilla JavaScript https://bit.ly/3anlCQR
    Learn SVG Animation – With HTML, CSS & Javascript https://bit.ly/2PRGwOr
    HTML, CSS, JavaScript – Build 6 Creative Projects https://bit.ly/33YIBjT

    Object-oriented Programming in JavaScript https://bit.ly/3f4Otu0
    How to Program Games: Tile Classics in JS for HTML5 Canvas https://bit.ly/2ZUfKuG
    Next Level CSS Creative Hover & Animation Effects https://bit.ly/3jEkzju
    The Web Developer Bootcamp (Older but still very relevant) https://bit.ly/2ZZJM0d
    Modern HTML & CSS From The Beginning (Including Sass) https://bit.ly/2Ec6Cch
    Advanced CSS and Sass: Flexbox, Grid, Animations and More! https://bit.ly/3g0uqxT
    JavaScript Basics for Beginners https://bit.ly/32Tn5wq
    JavaScript: Understanding the Weird Parts https://bit.ly/2WVe0zn
    The Complete JavaScript Course 2020: Build Real Projects! https://bit.ly/3fXGwaZ
    Modern JavaScript From The Beginning https://bit.ly/3fWJgWk

    Related videos:
    The fabulous Fibonacci flower formula (Mathologer) https://youtu.be/_GkxCIW46to
    Coding Challenge 30: Phyllotaxis (Coding train) https://youtu.be/KWoJgHFYWxY

    This HTML5 Canvas Tutorial for Beginners will be focused on the HTML canvas element and it’s fundamentals. We will look into how it works under the hood and where are all these methods that allow us to draw shapes come from and we will learn how to draw shapes with JavaScript
    Fibonacci sequence starts specifically with 0 and 1 and it is a very common interview question where you will asked to write an algorithm that returns numbers that create fibonacci sequence.
    To draw so called fibonacci flowers we don’t necessarily have to start with 0 and 1, we can also start with any two numbers we want, the only rule we cannot break is that each number in the sequence is the sum of the two preceding numbers

    This tutorial is part of a series – Creative coding with vanilla JavaScript and HTML canvas COMPLETE PLAYLIST:
    https://www.youtube.com/watch?v=lGJ9i6CYKyQ&list=PLYElE_rzEw_siuo-kkHh5h7Sk–6IPYNh

    Tools every front-end web developer needs:
    Adobe Creative Cloud (Adobe Photoshop, Illustrator) https://bit.ly/3e60cI0 (official Adobe website to buy Creative Suite applications)

    You can message me on TWITTER https://twitter.com/code_laboratory
    Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory
    javascript htmlcanvas frankslaboratory

    Music:
    Business / Corporate by Mixaund | https://mixaund.bandcamp.com
    Music promoted by https://www.free-stock-music.com

    The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I’ll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!

Canvas API – Web APIs

  • Tác giả: developer.mozilla.org
  • Đánh giá: 3 ⭐ ( 5091 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: The Canvas API provides a means for drawing graphics via JavaScript and the HTML element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.

JavaScript Đổi màu các đối tượng HTML

  • Tác giả: www.javascriptbank.com
  • Đánh giá: 3 ⭐ ( 3712 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đây là một đoạn mã JavaScript đơn giản để thay đổi màu nền…JavaScript Đổi màu các đối tượng HTML – Đổi màu các đối tượng HTML – Ngôn ngữ: tiếng Việt

Vẽ một dòng trong canvas

  • Tác giả: hiepsiit.net
  • Đánh giá: 3 ⭐ ( 6757 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng dẫn code chức năng đổi màu nền ngẫu nhiên với JavaScript

  • Tác giả: topdev.vn
  • Đánh giá: 3 ⭐ ( 4219 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Javascript thực chiến nghĩa là thay vì viết những bài về kiến thức cơ bản thì hướng dẫn code chức năng tab, autocomplete,…

Xuống dòng trong JavaScript

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 4 ⭐ ( 3198 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách xuống dòng trong JavaScript. Bạn sẽ biết cách xuống dòng trong JavaScript, cách sử dụng ký tự xuống dòng trong javascript cũng như cách xóa ký tự xuống dòng trong javascript trong bài

Giới thiệu về Canvas

  • Tác giả: hocjavascript.net
  • Đánh giá: 4 ⭐ ( 8757 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Được thêm vào trong phiên bản HTML5, Canvas hỗ trợ việc vẽ đồ họa trên giao diện web nhờ sử dụng JavaScript. Ví dụ như bạn có thể thực hiện

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php