Bài 7 - Hướng dẫn tạo đồng hồ bằng HTML Canvas (Canvas Clock - Phần 1)

Trong bài này và những bài tiếp theo mình sẽ hướng dẫn từng bước ví dụ trực quan làm thế nào để xây dựng một chiếc đồng hồ sử dụng hoàn toàn bằng HTML Canvas.

Phần 1 - Tạo Canvas

Đồng hồ cần một khung HTML. Tạo một HTML canvas với kích thước 300 x 300 pixel:

HTML code:

<!DOCTYPE html>
<html>
<body>

<canvas id="canvas" width="300" height="300" style="background-color:#333"></canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
drawClock();

function drawClock() {
    ctx.arc(0, 0, radius, 0 , 2*Math.PI);
    ctx.fillStyle = "white";
    ctx.fill();
}
</script>

</body>
</html>
Xem demo »

Code được giải thích như sau

Tạo một phần tử HTML <canvas> tới trang của bạn:
<canvas id="canvas" width="300" height="300" style="background-color:#333"></canvas>
Tạo một đối tượng canvas (var canvas) từ phần tử HTML canvas:
var canvas = document.getElementById("canvas");
Tạo một đối tượng vẽ đồ họa 2d (var ctx) cho đối tượng canvas:
var ctx = canvas.getContext("2d");
Tính bán kính của đồng hồ, sử dụng chiều cao của canvas:
var radius = canvas.height / 2;
NoteSử dụng chiều cao canvas để tính toán ra bán kính đồng hồ, điều này nghĩ là làm cho đồng hồ làm việc trên tất cả những kích thước canvas.
Dịch chuyển gốc tọa độ (0,0) của đối tượng đồ họa vào giữa của canvas:
ctx.translate(radius, radius);
Giảm bán kính đồng hồ (tới 90%) để vẽ bên trong canvas:
radius = radius * 0.90;
Tạo một hàm để vẽ đồng hồ:
function drawClock() {
    ctx.arc(0, 0, radius, 0 , 2*Math.PI);
    ctx.fillStyle = "white";
    ctx.fill();
}

Trương Đức Tài.

Bài 6 - Vẽ ảnh trên HTML Canvas


Canvas - Images

Ở bài này mình sẽ hướng dẫn cách làm thế nào để vẽ một ảnh lên trên một canvas. Để làm được điều này chúng ta sẽ sử dụng phương thức dưới đây:

 drawImage(image,x,y)

Ví dụ

The Scream

JavaScript:
window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 10, 10);
};
Xem demo »

Lưu ý rằng bạn không thể vẽ được ảnh trước khi ảnh đã được tải. Gọi hàm từ window.onload().

 Ở những bài tiếp theo mình sẽ hướng dẫn các bạn chi tiết từng bước để tạo ra một chiếc đồng hồ treo tường bằng Canvas. Các bạn chờ nhé!
Trương Đức Tài.

Bài 5 - Vẽ văn bản trên Canvas

Hi các bạn, hôm nay mình sẽ tiếp tục đi tới bài số 5.
Trong bài này chúng ta sẽ học cách làm thế nào để vẽ được văn bản trên một canvas, những phương thức và thuộc tính quan trọng nhất là:

  • font ✓ định nghĩa những thuộc tính phông cho văn bản
  • fillText(text,x,y) ✓ vẽ văn bản (có tô màu) trên canvas
  • strokeText(text,x,y) ✓ vẽ văn bản trên canvas  (không tô màu)

Sử dụng fillText()

Ví dụ

Thiết lập font là 30px "Arial" và viết một text tô màu trên canvas:



JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
Xem demo »

Sử dụng strokeText()

Ví dụ

Thiết lập font là 30px "Arial" và viết một text, không tô màu, trên canvas:



JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
Xem demo »


Thêm màu và căn giữa cho văn bản

Ví dụ

Thiết lập font 30px "Comic Sans MS" và viết một text được tô màu đỏ nằm giữa canvas:



JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2); 
Xem demo »

Trương Đức Tài.

Bài 4 - Tạo dải màu biến thiên với HTML Canvas Gradients

Canvas - Gradients

Gradients có thể được sử dụng để vẽ trong hình nhữ nhật, hình tròn, đường thẳng, văn bản, vv... Hình dáng trên Canvas không bị giới hạn bởi màu sắc cứng nhắc.

Có 2 loại khác nhau của Gradients:
  • createLinearGradient(x,y,x1,y1) ✓ tạo một dải màu tuyến tính
  • createRadialGradient(x,y,r,x1,y1,r1) ✓ tạo một tâm tròn màu biến thiên

Một khi chúng ta có một đối tượng gradient, chúng ta phải thêm hai hoặc nhiều điểm dừng màu.

Phương thức addColorStop() xác định những điểm dừng màu, và nó là vị trí dọc theo gradient. Những vị trí gradient có thể ở bất cứ nơi nào giữa 0 và 1.

Để sử dụng gradient, thiết lập thuộc tính fillStype hoặc strokeStyle tới gradient, rồi vẽ ra hình dạng (hình chữ nhật, văn bản, hoặc một đường).

Sử dụng createLinearGradient()

Ví dụ

Tạo một dải màu tuyến tính. Hình chữ nhật với biến thiên gradient:

JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Xem demo »

Sử dụng createRadialGradient():

Ví dụ

Tạo một tâm tròn màu biến thiên trong một hình chữ nhật:


JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
Xem demo »
⚽ Giải thích ví dụ trên:
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
✓ Vòng tròn thứ nhất có tâm ở vị trí x,y là 75,50 và có bán kính là 5 ✓ Vòng tròn thứ hai có tâm ở vị trí x,y là 90,60 và có bán kính là 100

 grd.addColorStop(0,"red"); ✓ Biến thiên màu từ đỏ
grd.addColorStop(1,"white"); ✓ Tới trắng
ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); ✓ Đưa vòng tròn màu biến thiên vào trong hình chữ nhật, Hình chữ nhật được vẽ bắt đầu ở tọa độ x,y là 10,10 và chiều rộng/cao hình nhữ nhật lần lượt là 150,80

Trương Đức Tài.

SQL - Làm thế nào để cập nhật dữ liệu tới một bảng trong truy vấn dùng JOIN và GROUP BY

Hôm nay mình đọc được câu hỏi của một bạn trong Group 'Lập trình viên' trên Facebook về SQL thấy rất hay, nói chung đối với mình nó không khó vì mình đã đi làm nhiều năm và dạng query kiểu này mình cũng làm rất nhiều rồi. Tuy nhiên mình thấy nó tương đối quan trọng và thường hay được sử dụng trong lập trình ứng dụng với database mà không phải ai cũng biết.
Vì vậy mình viết lời giải lên đây hi vọng các bạn Sinh viên chưa đi làm và chưa có nhiều kinh nghiệm về lập trình sql có thể tham khảo để phần nào tích thêm 1 chút kinh nghiệm nho nhỏ.
Câu hỏi:

[SQL]
Mọi người giúp em lấy CSDL từ trường DonGia để update vao trường TongTien vậy.
AI chỉ em cách viết Ham, Thu tục hay Trigger cho yêu cầu đó với.
Em cảm ơn ak?
Đáp án:
--CREATE A STORE PROCEDURE FOR UPDATING [TONGTIEN].
CREATE PROCEDURE sp_UpdateTONGTIEN_PhieuXuat
AS
BEGIN
       WITH t2 AS
       (
           select a.MaPX, sum(c.DonGia) as TongTien
           from PhieuXuat a
           join ChiTietPhieuXuat b on a.MaPX = b.MaPX
           join Xe c on c.MaXe = b.MaXe
           group by a.MaPX
       )
       UPDATE t1
       SET t1.TongTien = t2.TongTien
       FROM PhieuXuat AS t1
       INNER JOIN t2
       ON t1.MaPX = t2.MaPX
END

--EXEC STORE PROCEDURE
Exec sp_UpdateTONGTIEN_PhieuXuat

--SEE RESULT AFTER UPDATED.
select * from Xe
select * from ChiTietPhieuXuat
select * from PhieuXuat

 


Trương Đức Tài

How to enable remote connections in SQL Server 2008 (to 2014)?

You experience the following error message:
A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: Named Pipes Provider, error: 40 – Could not open a connection to SQL Server)
SQL Server 2008: The server was not found or was not accessible.
How to solve this issue?
There are a couple of things that might be going on here… (All of the following configurations are made on the computer running your SQL Server 2008 instance)
Allow remote connections to this server
The first thing you want to check is if Remote Connections are enabled on your SQL Server database. In SQL Server 2008 you do this by opening SQL Server 2008 Management Studio, connect to the server in question, right click the server…
… and open the Server Properties.
Navigate to Connections and ensure that Allow remote connections to this server is checked. Check if this solves the problem. If it does, here you go, continue with whatever you were doing and have a nice day.
Protocols for MSSQLServer
If you’re still running in issues let’s dig a bit deeper. The next good thing to check is the SQL Server Network Configuration. Open the SQL Server Configuration Manager, unfold the node SQL Server Network Configuration and select Protocols for MSSQLServer (or whatever the name of your SQL Server instance is).
Make sure that TCP/IP is enabled and try again. Even though I hope that this resolved your problems there might still be an issue with…
The Firewall
If there is still no communication happening between your computer and the remote SQL Server you most likely need to configure your firewall settings. A good first step is to figure out which port is being used by TCP/IP (and which you need to open in your firewall). You can do this by right clicking TCP/IP and selecting Properties.
Click on the tab IP Addresses and voilà – Port 1433 it is :-) That was easy enough and all there is left to do is to allow inbound TCP/IP traffic on Port 1433 in your firewall. In Windows 7 this works something like this. Open the Control Panel and navigate to Windows Firewall.
Click on Advanced Settings on the left hand side and you should see the Windows Firewall with Advanced Security. Select the Inboud Ruleson the left hand side and click on New Rule… on the right hand side.
This opens the New Inbound Rule Wizard which you can use to allow inbound traffic on Port 1433 for TCP/IP (and which is exactly how you configured your SQL Server in the steps above). Just follow the steps outlined below and you should be good :-)
That’s it, success! From here you should be able to access your SQL Server remotely. Enjoy!


Nguồn: blogs.msdn.microsoft.com

So sánh 2 files quá dễ với Compare It 4.1.2171 - Hữu ích cho dân IT Dev (full)

Bài này mình giới thiệu với các bạn một công cụ dùng để so sánh 2 files cực kỳ hữu ích, đơn giản và dễ sử dụng dành cho dân IT.

Mình chắc chắn rằng không ít các bạn coder không dưới 1 lần rơi vào tình trạng khó khăn và stress khi mà project có nhiều version và không biết version này với version khác đã thay đổi khác nhau như nào, làm thế nào để phát hiện ra sự thay đổi của từng đoạn code nhỏ trong cả 1 file lớn để mà merge code lại với nhau, phổ biến nhất là trường hợp 1 team với nhiều thành viên cùng phát triển dự án mà không dùng bất kỳ công cụ quản lý code nào trong quá trình phát triển.



Với cách  trình bày 2 cửa sổ nằm cạnh nhau, màu sắc khác nhau cho từng đoạn nên bạn  phân tích thật dễ dàng .

Thanh xem tổng quát, cho biết thêm mọi việc đã được thay đổi trong hai  files ấy ra sao.

Với Compare it, bạn có thể di chuyển  phần nào bị thay đổi giữa các files khác nhau chỉ  bằng một cú click chuột hay dùng phím tắt.

Dĩ nhiên, bạn còn có thể chỉnh sửa file trực tiếp trong  khi so  sánh ở 2 files này ở 2 cửa sổ nằm kế cận nhau,

Muốn in báo cáo những thay đổi này ư ? Phần mềm này còn có thể in màu ra ở từng phần khác nhau qua báo cáo ở dạng HTML về kết quả sự so sánh, y hệt như những gì mà bạn đã nhìn thấy trên màn hình.

I - Những nét thật đặc biệt của phần mềm này:

- Compare It  là một công cụ so sánh và hoà lẫn files giúp bạn so sánh làm việc trong nhiều phiên bản khác nhau củá mọi file văn bản. Sự so sánh bằng màu sắc cũng như 2 cửa sổ nằm cạnh nhau giúp bạn dễ dàng thấy  sự khác nhau và chỉnh lại chúng trong nháy mắt.

- So sánh nhiều dạng file thông dụng nhất  từ Word, Excel, PDF, RTF(Wordpad) hay dạng nén zip, C++ ,Delphi, file hình ảnh, cả  file dạng  binary, etc...

- Thanh xem tổng quát  giúp thấy ngay những thay đổi khác nhau qua hình ảnh.

- Công cụ chỉnh sửa thật  đầy đủ với cách  bao quanh chữ (wordwrap), syntax, chiếu sáng, trình bày giữa

- Hỗ trợ các file văn bản trong môi trường  DOS, UNIX và Mac.

- Có thể thay đổi lại  màu sắc, font chữ tuỳ chọn các dòng và ngay cả  bộ lọc trong khi mở file.

- Tích hợp hợp vào trính quản lý file của bạn

- Di chuyển và hoà lẫn đều có thể dùng bàn phím (phím tắt)  hay chuột thực hiện

- Hỗ trợ cho nhiều người dùng cùng một lúc.

- Compare It  rât  dễ cài, xoá, di chuyển hay đem đi bất cứ đâu cùng với bạn.

- Có thể in kết quả so sánh bằng file HTM: hay văn bản với nhiều tuỳ chọn khác nhau,

-  Hỗ trợ chuyễn đổi nên  so sánh được ngay cả các files không phải dạng văn bản

- So sánh cả file zip giúp bạn so sánh file này với file lưu trữ trong zip

II - Địa chỉ download.
https://drive.google.com/open?id=0B-saoX4FKTkyLVJoMFRDUVRCdE0

III - Cách sử dụng.
1 - Đầu tiên, bạn nên vào Options trên thanh menu  dể thiết lập tuỳ chọn theo ý muốn. Nhớ ấn nút  OK sau mỗi lựa chọn, để lưu lại cách thiết lập của mình

2 - Chọn  2 files để so sánh bằng nhiều cách:  Vào file, chọn open, nó lần lượt chọn file thứ 1, rồi đến file thứ hai ở đâu để bạn so sánh..

Bạn cũng có thể kéo thả vào từng cửa sổ Compare It: bên trái và phải.hay cả dùng Explorer (cần xem cách  dùng trong help).

Sau đó,  Compare Ít làm ngay công việc so sánh  trong tích tắc: chỉ cho bạn thấy bằng màu sắc những phần, hay  đoạn câu nào nào là khác nhau. Do 2 files được so sánh nằm ở 2 cửa sổ cạnh nhau nên bạn rất dễ thấy sự khác nhau và chỉnh lại sau đó . ..

2 - Giờ  bạn có thể thay đổi file  hay hoà lẫn chúng bằng  nhiều cách khác nhau. Dùng các phím Alt + mũi tên (đi lên, xuống hay qua trái, phải) hay dùng phím tắt để di chuyển trong từng file và copy sự thay đổi từ file này sang  file khác

3 - Muốn hoà lẫn filem, bạn cũng vào thanh Menu tìm ra mục Merge bên cạnh Edit, sẽ có menu sổ xuống với nhiều phím tắt để bạn sử dụng cho nhanh.

4 - Để xem và so sánh 2 file cho dễ dàng theo ý muốn của mình, nên  vào mục View trên thanh menu, cũng có nhiều phím tắt hướng dẫn sẳn .

5- Xem thông bao thống kê về khác nhau giữa 2 files, cần trở lại mục files trên thanh Menu tìm ra mục Statistic..

6 - Tóm lại sử dụng phần mềm này muốn có hiệu quả nhất, điều tốt nhất cho bạn là cần đoc kỹ phần help dành riệng cho từng mục đi từ, việc so sánhchỉnh sửa, hoà lẫn, qua đến xem, hay in báo cáo cùng với làm quen vài phím tắt  thông dụng của nó để thực hiện được nhanh nhất.

Nguồn: http://xahoithongtin.com.vn/trai-nghiem/tu-van/200904/so-sanh-2-files-qua-de-voi-grigsoftware-compare-it-412170-499175/

Bài 3 - Tọa độ trong HTML Canvas

Tọa độ Canvas

HTML canvas là một không gian hai chiều.

Phía trên góc trái của Canvas có tọa là (0,0)

Trong bài trước, bạn đã thấy phương thức này được sử dụng: fillRect(0,0,150,75).

Nó có nghĩa là: Bắt đầu ở góc trên bên trái với tọa độ (0,0) và vẽ một hình chữ nhật với kích thước dài x rộng là 150x75 pixels.

Ví dụ
(42,48) là tọa độ điểm màu đỏ như hình bên dưới.

Vẽ một đường thẳng

Để vẽ một đường thẳng trên một Canvas, sử dụng những phương thức sau đây:

  • moveTo(x,y) - định nghĩa điểm bắt đầu của đường thẳng
  • lineTo(x,y) - định nghĩa điểm kết thúc của đường thẳng

Để thực sự vẽ được một đường thẳng, bạn phải sử dụng một trong những phương thức như stroke().

Ví dụ
Định nghĩa một điểm bắt đầu ở vị trí (0,0), và một điểm kết thúc ở vị trí (200,100).
Sau đó sử dụng phương thức stroke() để vẽ ra một đường thẳng:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Xem Demo »

Vẽ một vòng tròn

Để vẽ một vòng trong trên một Canvas, sử dụng những phương thức sau đây:

  • beginPath() - bắt đầu một đường/vòng tròn
  • arc(x,y,r,startangle,endangle) - tạo một cung/đường cong. Để tạo một vòng tròn với phương thức arc(): Thiết lập góc ban đầu là 0 và góc kết thúc là 2*Math.PI. Những tham số x, y định nghĩa tọa độ x và y của tâm vòng tròn. Tham số r định nghĩa bán kính của vòng tròn.

Ví dụ

Định nghĩa một vòng tròn với phương thức arc(). Sau đó sử dụng phương thức stroke() để thực hiện vẽ vòng tròn:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Xem Demo »

Trương Đức Tài.