google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank






JavaScript với HTML5 vs ActionScript 3 với Flash trong đồ họa - Ai sẽ thắng? Có lẽ không cần phải giới thiệu nhiều thì mọi người cũng biết khá nhiều thông tin về HTML5 và Flash - hai công nghệ này đang này càng được phát triển và hoàn thiện để giành lấy sự ủng hộ của các nhà phát triển web.

Trong bài viết hôm nay, jsB@nk xin giới thiệu với bạn cuộc so găng của hai công nghệ web này trong một trận thi đấu vẽ vời đơn giản: tạo ảnh một biểu tượng cảnh báo với các dòng mã lệnh. Trang bị vũ khí của hai bên: HTML5 dùng tập lênh canvas với sự hỗ trợ của JavaScript, Flash với sự hỗ trợ của ActionScript 3.

Mặc dù tác giả không cho biết công nghệ nào thắng cuộc so găng này, nhưng riêng jsB@nk, dựa trên kết quả cuối cùng, cảm nhận rằng hình ảnh do HTML5 tạo ra có màu sắc trông thực hơn; nhưng đây cũng chỉ là một phép thử đơn giản và hai công nghệ này vẫn còn đang trong quá trình hoàn thiện. Bạn vui lòng vào trang trong để xem chi tiết cuộc so găng này.


Miễn phí web hosting 1 năm đầu tại iPage



Nếu bạn vẫn còn đang tìm kiếm một nhà cung cấp hosting đáng tin cậy, tại sao không dành chút thời gian để thử với iPage, chỉ với không quá 40.000 VNĐ/tháng, nhưng bạn sẽ được khuyến mãi kèm với quà tặng trị giá trên 10.000.0000 VNĐ nếu thanh toán cho 24 tháng ~ 900.000 VNĐ?

Có trên 1 triệu khách hàng hiện tại của iPage đã & đang hài lòng với dịch vụ, tuyệt đối chắc chắn bạn cũng sẽ hài lòng giống họ! Quan trọng hơn, khi đăng ký sử dụng web hosting tại iPage thông qua sự giới thiệu của chúng tôi, bạn sẽ được hoàn trả lại toàn bộ số tiền bạn đã sử dụng để mua web hosting tại iPage. Wow, thật tuyệt vời! Bạn không phải tốn bất kì chi phí nào mà vẫn có thể sử dụng miễn phí web hosting chất lượng cao tại iPage trong 12 tháng đầu tiên. Chỉ cần nói chúng tôi biết tài khoản của bạn sau khi đăng ký.

Nếu muốn tìm hiểu thêm về ưu / nhược điểm của iPage, bạn hãy đọc đánh giá của ChọnHostViệt.com nhé!
Thử iPage miễn phí cho năm đầu tiên NGAY

HTML5 introduces an element called a "canvas" on which we can use JavaScript to draw. This offers a quick and easy approach to drawing dynamic content. This article will compare this relatively new (and not yet cross-browser compatible) option for drawing to Adobe Flash's ActionScript 3. JavaScript and ActionScript have common roots as they are both dialects of ECMAScript.

For this article we are going to draw something with a little complexity to better compare the two languages. I have chosen a warning icon I made in Photoshop.

Warning Icon in JavaScript and ActionScript Compared

An Initial Difference


As we dive right into the code try not to be too concerned about the math. The point of this article is not to explain the trigonometry behind a triangle, just to compare how we draw the triangle. That said, the first thing we do is declare a few variables.

var phi = Math.tan((this.width/2) / this.height);
var x = this.innerBorder / Math.cos(phi);
var y = x / Math.tan(phi);
var gamma = Math.sqrt(Math.abs(this.innerBorder*this.innerBorder-x*x));
var phi:Number = Math.tan((iconWidth/2) / iconHeight);
var x:Number = innerBorder / Math.cos(phi);
var y:Number = x / Math.tan(phi);
var gamma:Number = Math.sqrt(Math.abs(innerBorder*innerBorder - x*x));

The code is similar in both languages, but two differences appear immediately and will be consistent throughout this article:

Type Declaration:
JavaScript is loosely typed, so we can't declare a variable's data type, like we can in ActionScript. For example, in the code above: var phi:Number declares that variable phi is a number. Trying to assign it as anything else will throw an error. It's worth noting that ActionScript 3 does not require type declaration, but it's generally good practice.
Use of the "this" keyword:
In JavaScript you will see properties like width preceded by the keyword "this" as in this.keyword. You can do this is ActionScript, but it is optional.

Basic Shape: A Triangular Path


The icon we are drawing has three major components:

Background:
A triangle with rounded corners, a gradient fill, and a subtle shadow.
Inner Border:
A smaller triangle border inside of the background.
Exclamation Point:
A bang character "!" inside the center of the icon.

Since both JavaScript and ActionScript support paths, we will use paths to define our shapes. Let us start with the background. It is a triangle consisting of three points.

Triangular path with points

context.beginPath();
context.moveTo(canvasWidth/2 - x, this.padding);	
context.lineTo((canvasWidth + this.width)/2 + gamma, this.padding + this.height - gamma);	
context.lineTo((canvasWidth - this.width)/2, this.padding + this.height + this.innerBorder);
context.lineTo(canvasWidth/2 - x, this.padding);
context.closePath();
var trianglePath:GraphicsPath = new GraphicsPath(new Vector.(), new Vector.());
trianglePath.moveTo(canvasWidth/2 - x, padding);			
trianglePath.lineTo((canvasWidth + iconWidth)/2 + gamma, padding + iconHeight - gamma);			
trianglePath.lineTo((canvasWidth - iconWidth)/2, padding + iconHeight + innerBorder);
trianglePath.lineTo(canvasWidth/2 - x, padding);

Although beginning a path is slightly different, both JS and AS3 use the methods moveTo and lineTo.


To add a little complexity, let's round the corners of the triangle (and we are not going to take the stroke shortcut I used in in my previous article: HTML 5 Canvas Example).

To round the corners we will use Bézier curves, which are supported by both languages. The type of Bézier curve will be quadratic (opposed to cubic). Quadradtic Bézier curves have two anchor points; the curve of the line between them is defined by one control point (Cubic Bézier curves have two control points).

Quadratic Bezier example

Adding a pair of control points at each corner will give a rounded effect.

Rounded and non-rouned corner triangular path

// Create the triangular path (with rounded corners)
context.beginPath();
// Top Corner
context.moveTo(canvasWidth/2 - x, this.padding);	
context.quadraticCurveTo(canvasWidth/2, this.padding - y, canvasWidth/2 + x, this.padding);
// Right Corner
context.lineTo((canvasWidth + this.width)/2 + gamma, this.padding + this.height - gamma);	
context.quadraticCurveTo((canvasWidth + this.width)/2 + y, this.padding + this.height + this.innerBorder, (canvasWidth + this.width)/2, this.padding + this.height + this.innerBorder);	
// Left Corner
context.lineTo((canvasWidth - this.width)/2, this.padding + this.height + this.innerBorder);
context.quadraticCurveTo((canvasWidth - this.width)/2 - y, this.padding + this.height + this.innerBorder, (canvasWidth - this.width)/2 - gamma, this.padding + this.height - gamma);
// Close Path
context.lineTo(canvasWidth/2 - x, this.padding);
context.closePath();
// Create the triangular path (with rounded corners)
var trianglePath:GraphicsPath = new GraphicsPath(new Vector.(), new Vector.());
// Top Corner
trianglePath.moveTo(canvasWidth/2 - x, padding);			
trianglePath.curveTo(canvasWidth/2, padding - y, canvasWidth/2 + x, padding);
// Right Corner
trianglePath.lineTo((canvasWidth + iconWidth)/2 + gamma, padding + iconHeight - gamma);			
trianglePath.curveTo((canvasWidth + iconWidth)/2 + y, padding + iconHeight + innerBorder, (canvasWidth + iconWidth)/2, padding + iconHeight + innerBorder);
// Left Corner
trianglePath.lineTo((canvasWidth - iconWidth)/2, padding + iconHeight + innerBorder);			
trianglePath.curveTo((canvasWidth - iconWidth)/2 - y, padding + iconHeight + innerBorder, (canvasWidth - iconWidth)/2 - gamma, padding + iconHeight - gamma);		
// Close Path
trianglePath.lineTo(canvasWidth/2 - x, padding);

JavaScript uses the method quadraticCurveTo on the HTML5 canvas to create the control point. ActionScript 3 uses the method curveTo.

JavaScript theo ngày


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web